D3 通过索引 i 引用 svg 元素

Question

我可以根据索引引用 svg 元素吗？

例如，我可以做 d3.selectAll("circle").on("click", function(d, i) { console.log(i) }，其中 i 是绘制的 ith <circle>。

但是，给定索引 i，我如何引用 ith <circle>？

怎么直接像circle[i].attr("cx").attr("cy")一样调用它来获取那个ith圈子的属性？举例来说，如果我想要第 5 个圆的坐标，但实际上不知道是第 5 个圆的坐标，在这种情况下 i=5?

如何以这种方式引用元素？这可能吗？

Answer 1

来自处理程序

d3.selectAll("circle").on("click", function(d, i) { console.log(i) }

您可以访问通过 this 关键字单击的 <circle> 元素（您可以 console.log(this) 看到它）。

如果可以访问 DOM 元素，您现在可以 d3-select 它：

d3.selectAll("circle")
  .on("click", function(d, i) {
    d3.select(this).attr('fill', 'red');
  }

此外，由于您拥有 DOM 节点，您还可以通过 this.parentNode 获取其父级，并且您可以 select 该父级的任何子级（即同级圈） .要select基于i，你应该可以使用:nth-child.

d3.selectAll("circle")
  .on("click", function(d, i) {
    d3.select(this.parentNode).select('circle:nth-child' + (i+1))
  }

您还可以select所有兄弟圈子并根据它们的索引有条件地操作它们：

d3.selectAll("circle")
  .on("click", function(d, i) {
    d3.select(this.parentNode).selectAll('circle')
      .attr('fill', function(dSibling, iSibling) {
        if(iSibling != i) {
          // Affects all sibling circles EXCEPT the clicked one
          return 'red'
        }
      })
  }

D3 通过索引 i 引用 svg 元素

D3 reference svg element by its index i

d3.js