D3js使用节点和链接拖动行为

Question

我的最终目标是获得与this类似的内容。因此我正在使用d3js，但我是一个非常初学者。我尝试了很多力布局，但我认为我不需要任何动画，只能拖动更新链接的节点。我已经定义了一个有效的拖动行为：

var dragListener = d3.behavior.drag()
    .on("dragstart", function (d) {
        dragStarted = true;
        d3.event.sourceEvent.stopPropagation();
    })
    .on("drag", function (d) {
        // update the node position
        var n = d3.select(this);
        n.attr("cx", d.x = d3.event.x);
        n.attr("cy", d.y = d3.event.y);
        update();
    })
    .on("dragend", function (d) {});

我的更新方法是：

function update () {
    force.nodes(nodes)
         .links(links);

    // Update links
    var l = vis.select("#linkG").selectAll("line.link")
               .data(links, function (d) { return d.source.id + "-" + d.target.id; })
               .enter()
               .append("svg:line")
               .attr("class", "link");

    l.style("stroke", "#000")
     .style("stroke-width", 1);

    // Update nodes
    var n = vis.select("#nodeG").selectAll("a")
               .data (nodes, function (d) { return d.id; })
               .enter()
               .append("svg:a").attr("xlink:href", function (d) { return "/user/" + d.id; })
               .append("svg:circle")
               .attr("class", "node")
               .attr("r", function (d) { return d.r; })
               .style("fill", "#454545")
               .style("stroke", "#e7ecef")
               .style("stroke-width", 3)
               .call(dragListener);

    force.on("tick", function () {
        nodes[0].x = WIDTH / 2;
        nodes[0].y = HEIGHT / 2;

        // Tried to update the link positions
        l.attr("x1", function (d) { console.log(d); return d.source.x; }) // HERE
         .attr("y1", function (d) { return d.source.y; })
         .attr("x2", function (d) { return d.target.x; })
         .attr("y2", function (d) { return d.target.y; });

        // Hopefully updates the node positions
        n.attr("cx", function (d) { console.log(d.x); return d.x; })
         .attr("cy", function (d) { return d.y; });
    });
}

我已经在初始化时启动了力布局。语句console.log(d)永远不会被触发。数据都很好，在html中所有元素都可以正常创建。

问题是，链接未显示或更新。有人可以帮我找到正确的行为吗？

Answer 1

最后我有解决方案（希望如此）。这些堆栈溢出post提供了很好的帮助。现在我可以根据需要正确拖动节点。关键点是力布局的d.fixed = true。也许这有助于其他人。