从数据访问d3.js元素属性？

我试图访问一些特定的svg圈子的cx＆cy属性，我已经使用d3.js的.data（）函数绘制到屏幕上，任何人都可以帮忙吗？ 下面是试图访问它的代码。

d3.selectAll(".mynode").each( function(d, i){ if(d.someId == targetId){ console.log( d.attr("cx") ); // just trying to demo my point, doesn't work } } 

我对d3.js＆javascript很新，所以我不确定我是否会接近前端，或许我可能错过了一个内置的解决scheme？

Answer 1

你的代码试图从一个数据项获得一个svg属性，当你真正想要的是从svg DOM元素获取该属性，如下所示：

 console.log(d3.selectAll(".mynode").attr("cx")); 

这只会给你select的第一个非null元素的属性; 您也可以过滤您的select，以获得您正在寻找的DOM元素：

 console.log(d3.selectAll(".mynode").filter(_conditions_).attr("cx")); 

或者，如果您想访问所有选定元素的属性，请在每个函数中使用this ：

 d3.selectAll(".mynode").each( function(d, i){ if(d.someId == targetId){ console.log( d3.select(this).attr("cx") ); } } 

Answer 2

接受答案中的过滤方法是正确的。 在接受的答案（使用.each）中的第二种方法是不正确的，并且包含与提问者相同的错误：如果没有调用.data（）（这是这里的情况），那么第一个参数d传递给.each将是未定义的（而不是“当前的dom节点”，因为包括我自己在内的所有新手都期望）; 你通过d3.select（this）得到的当前dom节点，这在最后的if语句中是正确的 – 错误在iftesting条件中。 正确的版本如下。

 d3.selectAll(".mynode").each(function(d,i){ var elt = d3.select(this); if (elt.attr("id") == "yourTargetIdGoesHere"){ console.log( elt.attr("cx") ); } }); 

小提琴： 小提琴 （包含两个版本的代码，即filter和每个）

更新：我的答案是假设你没有使用.data（），因为你没有给的代码; 后来我看到你写了你使用.data（）

在这种情况下，根据你的数据结构，用普通的d.cx代替d.attr（“cx”）可能会起作用。

Answer 3

还有更简单的方法:(提供索引i给出）

 d3.selectAll("circle")[0][i].attributes.cx.value 

因为它可以在这里看到。