D3。回忆功能时如何更新数据(没有按钮)

Question

我有一张forceCollide的气泡图。我正在尝试更新数据和改变圆圈半径时，召回功能(没有按钮)，这段代码正确工作。但是当我用新的数据重新计算函数时，它会重新绘制我的旧圈子。

function DrawBubbleChart(data) {
        var svg = d3.select("svg")
            ...
        var node = svg.selectAll(".circles")
            ...
        var simulation = d3.forceSimulation(data)
            .force("x", ...)
            .force("y", ...)
            .force("collide", ...);

        simulation.nodes(data)
            .on("tick", ...);   

        d3.select("#btn").on("click", () => {
            node.transition().duration(1000).attr("r", d => d.r);
            simulation.nodes(data);
            simulation.alpha(0.8).restart();
        })
    }  

我想做的是：

 function DrawBubbleChart(data) {

    if(empty){
            var svg = d3.select("svg")
                ...
            var node = svg.selectAll(".circles")
                ...
            var simulation = d3.forceSimulation(data)
                .force("x", ...)
                .force("y", ...)
                .force("collide", ...);

            simulation.nodes(data)
                .on("tick", ...);   
    } else {
            //d3.select("#btn").on("click", () => {
                node.transition().duration(1000).attr("r", d => d.r);
                simulation.nodes(data);
                simulation.alpha(0.8).restart();
            })
        }  

或者类似的东西。解决这个问题的最好办法是什么？

Answer 1

创建一个函数来绘制和更新你的气泡图并不是个好主意，原因很简单:在更新图表时，你必须创建一个可以访问以前气泡位置和大小的函数。这些是模拟所指定的属性：

• 索引-节点的基于零的索引为节点
• 节点的当前x位置
• 节点的当前y位置
• vx -节点的当前x-速度
• 维-节点的电流y-速度

而且，在你的例子中，另外一个例子，r。有可能，但很复杂。

我的建议是:第一次创建一个绘制气泡的函数，然后在该函数中创建另一个处理新数据的函数。这样的话，过渡是平稳的。

例如，在下面的演示中，我检查气泡的数据并更改r属性。您可以创建一个类似的函数，更新绑定到气泡的数据，维护它们的位置。

下面是演示：

​

var svg = d3.select("svg");

var colour = d3.scaleOrdinal(d3.schemeCategory10);

var data = d3.range(30).map(d => ({
    r: 6
}));

var simulation = d3.forceSimulation(data)
    .force("x", d3.forceX(150).strength(0.05))
    .force("y", d3.forceY(75).strength(0.05))
    .force("collide", d3.forceCollide(function(d) {
        return d.r + 1;
    }));

var node = svg.selectAll(".circles")
    .data(data)
    .enter()
    .append("circle")
    .attr("r", d => d.r)
    .attr("fill", (d, i) => colour(i));

setInterval(()=>{
    d3.selectAll("circle").data().forEach(d => d.r = Math.random()*15);
		node.transition().duration(400).attr("r", d => d.r);
    simulation.nodes(data);
    simulation.alpha(0.8).restart();
}, 3000);

simulation.nodes(data)
    .on("tick", d => {
        node.attr("cx", d => d.x).attr("cy", d => d.y);
    });

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

​