更改力布局中使用的数据答案

【问题标题】：Change the data used in a force layout更改力布局中使用的数据
【发布时间】：2017-08-05 15:02:31
【问题描述】：

首先我得到我的数据：

var dataNetwork = creationTableaux(seuil);

creationTableaux 是一个为我提供数据的函数，具体取决于我想要的节点和链接的数量

然后我创建模拟

        var simulation = d3.forceSimulation()
            .force("link", d3.forceLink().id(d => d.id))
            .force("charge", d3.forceManyBody().strength(-250))
            .force("center", d3.forceCenter(width / 2, height / 2));

        var link = canevas2.append("g")
        .attr("class", "links")
        .selectAll("line")
        .data(dataNetwork.links)
        .enter()
        .append("line")
        .attr("stroke", "lightblue")
        .attr("stroke-width", d => 6 * d.value);

        var node = canevas2.append("g")
        .attr("class", "nodes")
        .selectAll("circle")
        .data(dataNetwork.nodes)
        .enter()
        .append("circle")
        .attr("r", 5)
        .attr("fill", "lightblue");

        simulation.nodes(dataNetwork.nodes).on("tick", ticked);

        simulation.force("link").links(dataNetwork.links);

        function ticked() {
            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("cx", function(d) {
                    return d.x;
                })
                .attr("cy", function(d) {
                    return d.y;
                });
        }

这很好用，所以我知道（至少！）这是正确的。现在问题是所有这些都包含在另一个函数中，我可以在其中注入不同的 csv 文件，然后绘制它们的链接和节点等等。我用一个按钮调用这个函数，例如当我调用这个函数两次时，两个图表同时在我的页面上。

我尝试了一些示例，例如this one，但我被困住了。我知道问题在于所有节点和链接都是使用enter() 调用的，并且那里应该有一个exit().remove()，但我应该如何解决这个问题是个谜。

【问题讨论】：

标签： d3.js transition

【解决方案1】：

所以我终于找到了一种方法。在启动模拟之前，我只需要删除所有预先存在的元素。

canevas2.selectAll("line").remove();
canevas2.selectAll("circle").remove();
canevas2.selectAll("text").remove();

不明白为什么我之前没有考虑过！

edit ：这种方法的缺点当然是“过渡”（如果可以称为过渡）不会很平滑，因为每次都会重新绘制图表。但总比没有好:)

【讨论】：