拖动行为行不通吗？

Question

I'm trying to find the problem with the drag behavior setup that I have in my program, because it seems like the drag won't even activate. I'm using http://jsfiddle.net/da37B/317/ as the reference code for my program.

Here's the relevant code:

 vis.selectAll(".nodes")
        .data(nodes)
        .enter().append("circle")
        .attr("class", "nodes")
        .attr("cx", function (d) {
            return xRange(d.x);
        })
        .attr("cy", function (d) {
            return yRange(d.y);
        })
        .attr("r", "10px")
        .attr("fill", "black")
        .attr("transform", "translate(" + p.x + "," + p.y + ")")
        .call(drag); <------

---

// Define drag beavior
var drag = d3.behavior.drag()
    .on("drag", dragmove);

function dragmove(d) {
    var x = d3.event.x;
    var y = d3.event.y;
    d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
}

And here's the full code: https://jsfiddle.net/4o5pch1q/1/

Answer 1

The reason you don't see any effect is that you have an error in your jsfiddle. Please check the console for such obvious things in the future.

Once the obvious error is fixed (including moving the definition of drag up so that it's defined before it's being used), the only thing that remains is to tell D3 how to get the origin of the element being dragged (otherwise the circle "jumps" on drag):

var drag = d3.behavior.drag()
    .origin(function(d) { return d; })
    .on("drag", dragmove);

Complete demo here .