Question

的强制布局

首先我得到我的数据：

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()，但我应该如何解决这个问题是个谜。

Answer 1

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

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

看不出为什么我之前没想过它！

编辑：这个方法的缺点当然是“过渡”（如果它可以被称为过渡）将不会非常平滑，因为每次都会重绘图表。但它总比没有好。）

更改强制布局中使用的数据

1 个答案: