在 d3.vs4 上调整 D3 ForceSimulation 的大小

Question

我正在尝试在 window 调整大小时更新气泡图的模拟。到目前为止，气泡的半径会调整大小，但 cx 坐标不会更新，并且气泡会停留在最初渲染的位置。

var simulation=d3.forceSimulation()
            .force('x',d3.forceX(function(d){return xScale(d.n);}))
            .force('y',d3.forceY(height))
            .force('collide',d3.forceCollide(function(d){return rScale(d.m);}));
simulation.nodes(data)
    .on('tick',ticked);
function ticked(){
    dot
        .attr('cx',function(d){return d.x;})
        .attr('cy',function(d){return d.y;})
}

d3.select(window).on('resize',resize);
function resize(){
    //get width of window
    //update xScale and rScale
    //update radius of bubbles 
    simulation
        .force('x',d3.forceX(function(d){return xScale(d.n);}))
        .force('y',d3.forceY(height))
        .force('collide',d3.forceCollide(function(d){return rScale(d.m);}));
    simulation.nodes(data)
        .on('tick',ticked);
    function ticked(){
        dot
            .attr('cx',function(d){return d.x;})
            .attr('cy',function(d){return d.y;})
    }
}

Answer 1

您将需要使用 .restart() 方法重新启动您的力模拟，并尝试使用 .alpha() 或 .alphaTarget() 值。您的代码有一些不必要的重复。

也许像下面这样的东西对你的 use-case 有用？

var simulation=d3.forceSimulation()
            .force('x',d3.forceX(function(d){return xScale(d.n);}))
            .force('y',d3.forceY(height))
            .force('collide',d3.forceCollide(function(d){return rScale(d.m);}));
simulation.nodes(data)
    .on('tick',ticked);
    
function ticked(){
    dot
        .attr('cx',function(d){return d.x;})
        .attr('cy',function(d){return d.y;})
}

d3.select(window).on('resize',resize);
function resize(){
    //get width of window
    //update xScale and rScale
    //update radius of bubbles 
    simulation
        .force('x',d3.forceX(function(d){return xScale(d.n);}))
        .force('collide',d3.forceCollide(function(d){return rScale(d.m);}))
        // 0.3 is arbitrary
        .alpha(0.3)
        .restart()

}