D3节点的错误定位

Question

我有一个简单的力布局，可以在单击某些按钮时计算节点和链接。第一次计算和显示节点时，所有内容都已正确定位。但是，当在另一次点击后重新计算节点时，我附加到节点的圆圈的位置是关闭的，但我添加的文本仍然在正确的位置。这是我的JS：

  //Compute Nodes and Links
  var data = this.computePreviewNodes($(e.currentTarget).data("id"), $(e.currentTarget).data("type"));

  var canvas = d3.select(".body").append("svg")
            .attr("width", width)
            .attr("height", screen.height/2)
            .append("g");

        canvas.append("text")
            .text(compObj.name)
            .attr("text-anchor", "middle")
            .attr("font-size", "2em")
            .attr("x", width/2)
            .attr("y", 40);

        var force = d3.layout.force()
            .nodes(data.nodes)
            .links(data.links)
            .gravity(.05)
            .distance(100)
            .charge(-10)
            .size([width, screen.height/2]);

        var links = canvas.selectAll(".links")
            .data(data.links)
            .enter().append("line")
                .attr("class", "links")
                .attr("fill", "none")
                .attr("stroke", "blue");

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

        nodes.append("circle")
            .attr("cx", function(d) {return d.x;})
            .attr("cy", function(d) {return d.y;})
            .attr("r", 10)
            .attr("fill", "green");

        nodes.append("text")
            .text(function(d) {return d.name})
            .attr("text-anchor", "right")
            .attr("font-size", "1.8em")
            .attr("y", 5);

        force.on("tick", function(e) {
            nodes
                .attr("transform", function(d, i){
                    return "translate(" + d.x + ", " + d.y + ")";
                });

            links
                .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;})
        })
        force.start();

我的computePreviewNodes（）函数只是根据点击的按钮提供了需要显示的节点。我的想法是，在第二次渲染节点后，我可能没有正确更新节点位置。有什么想法吗？

这是我第一次点击时的画布：

这是我再次点击/计算我的节点时：