javascript - 添加节点未正确链接到现有节点

Question

我有一个利用 Force Layout 的 d3 图.当我前面有一组节点时，它的布局就很好。具体来说，我的意思是节点保持良好分离并且链接正确。

我的问题的演示在 jsFiddle here 上.

我还在下面包含了一个代码片段，它看起来像 jsFiddle 一样工作。

但是，如果我 start使用一个节点，然后使用 Add Person 添加另一个节点按钮，您会注意到第一个节点(即使它在链接中被引用)没有响应，也无法移动。

似乎后者才是真正的问题，因为它无法移动。

我尝试过的

1. 执行 force.resume()而不是 force...start()在图表中添加新人时位于顶部。 结果:这会导致错误，Error: Invalid value for <g> attribute transform="translate(NaN,NaN)"发生，我还没有弄清楚为什么。
2. 添加 force.resume()在方法的末尾，不添加 on('tick' ...在向图表中添加新人时再次出现。我通过执行 force...start() 来耦合它在顶部，无论 resume . 结果:导致第一个节点再次反弹(有希望)，但添加的节点停留在左上角，就好像它没有连接一样。

var scope = {};

scope.nodes = [];
scope.links = [];

var width = 960,
    height = 500;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var force = d3.layout.force()
    .charge(-150)
    .linkDistance(150)
    .size([width, height]);

function renderGraph(resume) {
    force.nodes(scope.nodes)
        .links(scope.links)
        .start();

    var link = svg.selectAll(".link")
        .data(scope.links)
        .enter().append("line")
        .attr("class", "link");

    var node = svg.selectAll(".node")
        .data(scope.nodes)
        .enter().append("g")
        .attr("class", "node")
        .call(force.drag);

    node.append("image")
        .attr("xlink:href", function (d) {
        return d.avatar || 'https://github.com/favicon.ico'
    })
        .attr("x", -56)
        .attr("y", -8)
        .attr("width", 64)
        .attr("height", 64);

    node.append("text")
        .attr("dx", 12)
        .attr("dy", ".35em")
        .text(function (d) {
        return d._id === scope.user.profile._id ? 'You' : d.firstName + ' ' + d.lastName
    });

    force.on("tick", function () {
        link.attr("x1", function (d) {
            return d.source.x;
        })
            .attr("y1", function (d) {
            return d.source.y;
        })
            .attr("x2", function (d) {
            return d.target.x;
        })
            .attr("y2", function (d) {
            return d.target.y;
        });

        node.attr("transform", function (d) {
            return "translate(" + d.x + "," + d.y + ")";
        });
    });
}

scope.user = {
    profile: {
        _id: 1,
        firstName: 'Bob',
        lastName: 'Smith'
    }
};
scope.nodes.push(scope.user.profile);
renderGraph();

var b = document.getElementById("addButton");
b.onclick = addPerson;

function addPerson() {
    scope.nodes.push({
        _id: 2,
        firstName: 'Jane',
        lastName: 'Smith'
    });
    scope.links.push({
        source: 0,
        target: scope.nodes.length - 1
    });
    renderGraph();
}

.link {
    stroke: #ccc;
}
.node text {
    pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<button id="addButton">Add Person</button>

Answer 1

问题是:

当你这样做的时候

var node = svg.selectAll(".node")
        .data(scope.nodes)
        .enter().append("g")
        .attr("class", "node")
        .call(force.drag);

该节点具有 g 元素并且 tick 期望选择即:

var node = svg.selectAll(".node")
        .data(scope.nodes);

应该是:

var link = svg.selectAll(".link")
    .data(scope.links);//this selection is expected in the tick function

link.enter().append("line")
    .attr("class", "link");

var node = svg.selectAll(".node")
    .data(scope.nodes);//this selection is expected in the tick function

//attaching text/circle everything pertaining to the node n the g group.
var nodeg = node.enter().append("g")
    .attr("class", "node")
    .call(force.drag);

工作代码 here

希望这对您有所帮助!