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

因为它可以在这里看到。

  • img src SVG改变填充颜色
  • 将SVG转换为带有应用图像的PNG作为svg元素的背景
  • 如何删除或replaceSVG内容?
  • 使用JavaScript,我可以更改SVG <g>元素的Z索引/图层吗?
  • 在HTML5canvas上绘制一个SVG文件
  • 在Windows Azure网站中使用SVG
  • 如何使用D3.js将图像添加到svg容器
  • 如何样式SVG与外部CSS?
  • 将PDF转换为SVG
  • 如何使用Image Magick将SVG转换为PNG?
  • 与背景图像的三angular形状