Question

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

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＆amp; javascript，所以我不确定我是否正在接近这个，或者我可能错过了一个内置的解决方案？

Answer 1

您的代码正在尝试从数据项中获取svg属性，而您真正想要的是从svg DOM元素获取该属性，如：

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

这只会为您提供所选内容的第一个非null元素的属性;您还可以filter选择以获取您要查找的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

甚至更简单的方法:(提供索引i）

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

可以看到here。

Answer 3

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

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

小提琴：fiddle（包含两个版本的代码，即过滤器和每个版本）

更新：我的回答是假设您没有使用.data（），因为您没有为此提供代码;后来我看到你写道你确实使用过.data（）

在这种情况下，根据您的数据结构，用普通的d.cx替换d.attr（＆＃34; cx＆＃34;）可能会有效。

Answer 4

这里最简单的方法是为每个节点赋予唯一的ID，然后选择具有目标ID的节点来运行转换。

从基准访问d3.js元素属性？

4 个答案: