javascript - Force.drag().on 返回未定义

Question

我正在使用粘力布局:http://bl.ocks.org/mbostock/3750558

我正在尝试在我的布局中实现粘性拖动。所以我有这样的东西:

    force = d3.layout.force()
        .charge(-120)
        .linkDistance(30)
        .size([width, height])
        .on("tick", tick);;

        var nodeDrag = force.drag()
        .on("dragstart", dragstart);

//then for drag i call nodeDrag on the node after I append circle :

.call(nodeDrag)



function dragstart(d) {
  d3.select(this).classed("fixed", d.fixed = true);
}

这将返回错误:TypeError:无法读取未定义的属性“on”

指向线:var nodeDrag = force.drag()

如果我使用d3.behavior.drag()，它会加载可视化，但我无法拖动，因为我猜测它没有使用我的force布局.

有什么想法吗？

Answer 1

我自己解决了这个问题。基本上我必须自己计算出运动，这就是为什么没有一个节点在工作。所以我像这样实现了它:

var nodeDrag = d3.behavior.drag()
    .on("dragstart", dragstart) //-when you first click
    .on("drag", dragmove) //-when you're dragging
    .on("dragend", dragend); //-when the drag has ended

function dragstart(d, i) //-ability to move nodes to one place and keep them there
{
    force.stop(); //-stop the force layout as soon as you move nodes
}

function dragmove(d, i) //-updates the co-ordinates 
{
    //d.px += d3.event.dx;
    //d.py += d3.event.dy;
    d.x += d3.event.dx;
    d.y += d3.event.dy; 


    d3.select(this).attr("transform", function(d,i)
    {
        return "translate(" + [ d.x,d.y ] + ")";
    });
    tick(); //-updates positions

}

function dragend(d, i) //-when you stop dragging the node
{
    d.fixed = true; //-D3 giving the node a fixed attribute
    tick(); //-update positions
}

节点没有移动的主要原因是因为我没有告诉它们移动。此外，调用 tick 更新了所有其他节点的位置。希望能帮助遇到同样问题的人:)