D3从元素获取属性

阿尔宾·维诺(Albin Vinoy):

我正在尝试一些基本的d3,我一直在尝试获取rect使用d3 的每个属性,但我什么也做不了。

控制台画面

当我尝试时d3.selectAll("rect"),我得到

结果

如何rect使用类似d3.selectAll("rect").select("part1").attr(...)或类似的内容访问属性我想访问所有的不同属性rect

Gerardo Furtado:

您可以使用getter获取元素的任何属性

d3.select(foo).attr("bar")

基本上这attr()只是一个参数的函数。

这是一个演示。有两类矩形,part1part2我选择所有part1矩形并获取它们的x位置:

var svg = d3.select("svg");
var rects = svg.selectAll("foo")
  .data(d3.range(14))
  .enter()
  .append("rect")
  .attr("fill", "teal")
  .attr("y", 20)
  .attr("x", d => 10 + 12 * d)
  .attr("height", 40)
  .attr("width", 10)
  .attr("class", d => d % 2 === 0 ? "part1" : "part2");

d3.selectAll(".part1").each(function(d,i) {
  console.log("The x position of the rect #" + i + " is " + d3.select(this).attr("x"))
})
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章