D3.js：使用索引选择元素的适当方法？

Question

我的代码可以工作，但工作方式不正确。

以下是其功能的图片：

左侧是工具栏，如果单击迷你圆圈，它将创建一个新的圆圈，我可以将该圆圈拖放到工具栏之外。我可以根据需要拖放任意多的圆圈，它们的类名均为“ draggableCircle”

这是我现在执行拖放逻辑等的方式（单击工具栏上的圆圈后会触发拖放）：

var dragdrop = d3
  .drag()
  .on("start", function() {
    const uh = d3.select(this.parentNode);
    uh.append("circle")
      .attr("class", "draggableCircle")

      .attr("r", 20)
      .attr("cx", 50)
      .attr("cy", 50)
  })
  .on("drag", function() {
    const uh = d3
      .selectAll(".draggableCircle")
      .filter(function(d, i) {
        const uh = d3.select(this.parentNode);

        const numChildren = uh._groups[0][0].children.length;
console.log(i);

        return i == numChildren - 2;

      }) 

      .attr("cx", function(d, i) {

        return d3.event.x;
      })
      .attr("cy", function(d) {
        return d3.event.y;
      });
  })
  .on("end", function() {
    const endCircle = d3
      .selectAll(".draggableCircle")
      .filter(function(d, i) {
        const uh = d3.select(this.parentNode);

        const numChildren = uh._groups[0][0].children.length;

        return i == numChildren - 2;
      });

    const endX = endCircle.attr("cx");

    if (endX <= 500) {
      d3.selectAll(".draggableCircle")
        .filter(function(d, i) {
          const uh = d3.select(this.parentNode);

          const numChildren = uh._groups[0][0].children.length;

          return i == numChildren - 2;
        })
        .remove();
    }
  });

所以这是一个d3 drag（），具有用于开始，拖动和结束的已实现功能。我必须选择基于索引的原因是因为我所有新添加的圆（在拖动开始时添加）都具有类名“可拖动的圆”。 但是.on（“ drag”）逻辑与.on（“ start”）逻辑是分开的，因此我无法访问新添加的圆，因此我必须找到一种方法来找到它.on（“拖动”）。我目前正在通过查找所有可拖动圆的parentNode来做到这一点，该圆的长度为圈数+ 2，因为在父节点下还有两个其他元素。然后，由于.selectAll（“ draggableCircle”）。filter（function（d， i ）...）中的i列出了所有圆的索引，因此我可以通过返回来过滤除一个可拖动圆之外的所有圆 i == parentNodeLength-2

但这似乎是绝对愚蠢的方法，因为将来我可能会增加parentNodeLength，而不再是“ -2”，那么，有什么见解吗？