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

但是，這僅適用於相似的形狀，該代碼還有一些其他問題需要解決。 我建議您從頭開始，盡量不要使用全局變量，而是在需要時（例如在處理程序內）要求（或選擇 ）任何形狀。 這將降低復雜性，因為您不再需要嘗試遵循每個變量的狀態。

---

演示