d3.drag在几秒钟后停止

Question

Today's question is about the d3.drag() function. I don't really understand the simulation.alpha value.

I face the following problem: I want to drag my nodes around. Here is a little part of the code:

var node = d3.select("svg").selectAll("circle")
             .data(nodes).enter().append("circle")
             .call(d3.drag().on("start", dragstart)
                            .on("drag", dragged)
                            .on("end", dragend));

function dragstart(d){
    //If i delete the following line, my simulation stops after some time.
    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;
};

Like I said in the comment, if I don't restart the alphaTarget , the dragging stops after a few seconds. Is someone able to explain this phenomenon?

Here is my complete JSFiddle: https://jsfiddle.net/FFoDWindow/zwtzq8rj/2/

Answer 1

Got same problem an hour ago.

Probably you have your render logic in tick function. If you want to be able to drag elements without restarting simulation you should implement render function (which tells elements to set their position from data's x and y). Add then the render function call to your "dragged" function

function dragged(d) {
    d.x = d3.event.x;
    d.y = d3.event.y;
    render();
}

You can change also your tick() function to something like

function tick(){
    render();
}

Not the most efficent way but it works for me.

If you want to have simulation started after drag as well then your implementation is correct.