在d3中选择动态DOM元素

Question

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

http://jsfiddle.net/nilarya/WKa8F/2/这是我到目前为止所到之处，请您看一下（代码有些混乱，很抱歉，它在这里很晚。 .. :(）如果在画布上绘制多个对象（圆形和/或矩形），然后尝试选择一个对象，则会注意到该错误。

我尝试使用

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 {}
}

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

---

演示