d3 v4力模拟中的节点和链路不同步

时间:2017-06-28 16:08:59

标签: javascript d3.js dynamic simulation

在d3中动态更新力模拟的数据后,节点的g元素在与链接指向的位置不同的位置初始化,并且在拖动它们时它们不会同步移动。 Here is what the graph looks like after adding a node

我按照本教程了解更新模式:https://bl.ocks.org/mbostock/1095795

我创建了我的链接和节点,如下所示:

           // update graph for nodes
            node = node.data(graph.nodes, function (d) { return d.id; });

            node.exit().remove();

            node = node.enter().append("g")
            .attr("class", "node")
            .call(d3.drag()
            .on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragended))
            .merge(node);

            node
            .append("circle")
            .attr("r", function (d) { return d.id == undefined ? 0 : d.width / 2 + 2 * padding; })
            .attr("fill", function (d) { return color(d.type); })
            .attr('stroke', '#000000')
            .attr('stroke-width', '3');
            console.log(graph.nodes);

            // add the text to the group
            node
           .append('text')
           .text(node => node.type)
             .attr('font-size', 15)
             .attr('font-family', fontFamily)
             .attr('dx', function (d) { return -d.width / 2 })
             .attr('dy', 4);

            // update links
            link = link.data(graph.links);
            link.exit().remove();

            link = link.enter()
             .append("line")
             .attr("stroke-width", "4px")
             .merge(link);


            // restart simulation
            simulation.nodes(graph.nodes);
            simulation.force("link").links(graph.links);
            simulation.alpha(0.01);
            simulation.restart();

并在节点和链接数据如此更改时更新图表:

get

0 个答案:

没有答案