在d3中选择动态DOM元素

Question

I am trying to draw shapes and select and interact with them using D3. I am learning D3, so need to understand some logic more clearly. I can draw shapes, I need to drag them while selecting a shape. I cannot seem to select the particular object when there are multiple objects drawn on canvas.

http://jsfiddle.net/nilarya/WKa8F/2/ this is where I have been so far, I request you to take a look at it,(the code is somewhat messy, I'm sorry, its late in here... :() if you draw multiple objects (Circles and/or Rectangles) on the canvas and then try to select one, you will notice the error.

I have tried using

d3.select(this)

and also

d3.select(this.firstChild)

but I need to select a particular circle or rectangle. how do I do this?

Answer 1

Update your dragmove listener to handle only the selected shape, ie the shape to which this listener is binded to. All you'll have to do is assign the selection of this by D3 to a variable, and use that instead of the external references, like so:

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

However, this will work only for similar shapes, the code has some more issues that needs to be addressed. I suggest you start from scratch, and try not to use global variables at all, but instead require (or select ) any shape when you need it (eg inside a handler). This will reduce complexity as you no longer have to try to follow the state of each variable in your minds eyes.

---

Demo