Question

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

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

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

以某种方式直接调用circle[i].attr("cx").attr("cy")来获取ith圈的属性？比方说，如果我想要第5个圆圈的坐标而不知道是哪一个，在这种情况下i = 5？

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

Answer 1

来自处理程序

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

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

在访问DOM元素的情况下，您现在可以选择它：

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

此外，由于您拥有DOM节点，您还可以通过this.parentNode获取其父节点，并且您可以选择父节点中的任何一个（即兄弟圈子）。要根据i进行选择，您应该可以使用:nth-child。

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

您还可以选择所有兄弟圈并根据其索引有条件地操纵它们：

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元素

1 个答案: