48

我正在尝试使用 d3.js 的 .data() 函数访问我已经在屏幕上绘制的一些特定 svg 圆圈的 cx 和 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 和 javascript 还是很陌生，所以我不确定我是否要从头到尾处理这个问题，或者我可能错过了内置的解决方案？

4

4 回答 4

72

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

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

这只会给你选择的第一个非空元素的属性；您还可以过滤您的选择以获取您正在寻找的 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") );
  }
}
于 2012-07-05T00:25:42.240 回答
12

还有更简单的方法：（提供索引i）

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

可以在这里看到。

于 2014-06-29T23:38:08.090 回答
10

接受答案中的过滤方法是正确的。接受答案中的第二种方法（使用 .each）是不正确的，并且包含与提问者相同的错误：如果未调用 .data() （这里就是这种情况），则第一个参数 d 传递给 .each将是未定义的（而不是“当前的 dom 节点”，正如包括我自己在内的所有新手所期望的那样）；您通过 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") );
    }
});

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

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

在这种情况下，根据您的数据结构，将 d.attr("cx") 替换为普通的 d.cx 可能会起作用。

于 2014-05-21T16:25:06.627 回答
0

这里最简单的是给每个节点一个唯一的 id，然后选择具有目标 id 的节点来运行你的转换。

于 2020-12-05T23:36:23.190 回答