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

Question

我正在尝试使用d3.js的.data()函数访问我已经使用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很新,所以我不确定我是否正在接近这个,或者我可能错过了一个内置的解决方案？

Answer 1

你的代码试图从一个数据项中获取一个svg属性,当你真正想要的是从svg DOM元素中获取该属性时,如:

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

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

如可以看出这里.

Answer 3

接受的答案中的过滤方法是正确的.接受的答案中的第二种方法(使用.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.cx替换d.attr("cx")可能会起作用.