从数据访问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?

3 Solutions collect form web for “从数据访问d3.js元素属性?”

你的代码试图从一个数据项获得一个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") ); } } 

接受答案中的过滤方法是正确的。 在接受的答案(使用.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”)可能会起作用。

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

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

因为它可以在这里看到。

  • SVG / XML中有一些innerHTMLreplace吗?
  • jQuery的SVG与拉斐尔
  • 如何删除或replaceSVG内容?
  • 作为背景图像时,修改SVG填充颜色
  • 如何用CSS分割不同颜色的圆
  • Google网页字体在Windows上的Chrome中呈现波涛汹涌
  • 拉斐尔JS和文本定位?
  • 透明文本剪出背景
  • D3 - 如何处理JSON数据结构?
  • 使用JQuery和Jquery-svg拖动SVG
  • jQuery的附加不工作与SVG元素?