使用新的气泡半径更新 ForceSimulation

Question

我已经用力模拟初始化了一个气泡图。我如何更新数据，即。更改气泡半径。

我尝试使用一组新节点重新启动 forceSimulation，但所有其他节点都移动，好像电荷增加了一样。

var nodes=[{'radius':3},{'radius':4},{'radius':5},{'radius':6}];

var sim = d3.forceSimulation(nodes)
    .force('charge', d3.forceManyBody().strength(-1))
    .force('center', d3.forceCenter(width / 2, height / 2))
    .force('collision', d3.forceCollide().radius(function(d) {
      return d.radius
    }))
    .on('tick',ticked)


 function ticked() {
  var u = svgContainer
     .selectAll('circle')
     .data(nodes)
   u.enter()
    .append('circle')
    .attr('fill','orange')
    .merge(u)
    .attr('r', function(d) {
    return d.radius
    })
   .attr('cx', function(d) {
      return d.x
    })
   .attr('cy', function(d) {
      return d.y
    })
  u.exit().remove()
}


function updateBubbles(){
    node[0]['radius]=10;
     sim.nodes(nodes).alpha(1).restart();
}

Answer 1

您可以将 updateBubbles 更改为以下内容：

function updateBubbles() {
    svgContainer.selectAll('circle')
        .attr('r', 10);     
}

节点当前移动就像电荷增加一样，因为您将 alpha 设置为 1 并重新启动模拟。当我们立即重新加热图表时，这是我们期望看到的行为。