在d3中选择动态DOM元素

Question

我正在尝试绘制形状并使用D3选择并与它们交互。我正在学习D3，所以需要更清楚地理解一些逻辑。 我可以绘制形状，我需要在选择形状时拖动它们。当在画布上绘制多个对象时，我似乎无法选择特定对象。

http://jsfiddle.net/nilarya/WKa8F/2/这是我到目前为止的地方，我请你看看它，（代码有点凌乱，对不起，它在这里晚了...... :(）if你在画布上绘制多个对象（圆圈和/或矩形），然后尝试选择一个，你会发现错误。

我尝试过使用

d3.select(this)

以及

d3.select(this.firstChild)

但我需要选择一个特定的圆形或矩形。我该怎么做？

Answer 1

更新dragmove侦听器以仅处理选定的形状，即此侦听器绑定到的形状。 您所要做的就是将D3的this选择分配给变量，并使用它而不是外部引用，如下所示：

function dragmove(d) {
    var shape = d3.select(this);
    if (isrectMov == true) {
        shape.attr("x", d3.event.x)
            .attr("y", d3.event.y)
            .attr("cursor", "move");
    } else if (islineMov == true) {
        shape.attr("x1", d3.event.x)
            .attr("y1", d3.event.y)
            .attr("x2", d3.event.x)
            .attr("y2", d3.event.y)
            .attr("cursor", "move");
    } else if (iscircleMov == true) {
        shape.attr("cx", d3.event.x)
            .attr("cy", d3.event.y)
            .attr("cursor", "move");
    } else {}
}

但是，这仅适用于类似的形状，代码还有一些需要解决的问题。我建议你从头开始，尽量不要使用全局变量，而是在需要时（例如在处理程序内）需要（或选择）任何形状。这将降低复杂性，因为您不再需要尝试跟踪思维眼中每个变量的状态。

---

Demo