javascript - 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

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

• index - 节点从零开始的索引到节点
• x - 节点当前的 x 位置
• y - 节点当前的 y 位置
• vx - 节点当前的 x 速度
• vy - 节点当前的 y 速度

并且，就您而言，还有一个，r。这是可能的，但很复杂。

我的建议是:创建一个用于第一次绘制气泡的函数，然后在该函数内创建另一个处理新数据的函数。这样，过渡就会顺利。

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

这是演示:

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>