d3.js - 将新节点添加到集群力布局

Question

使用 Mike Bostock 示例 clustered nodes ，我正在尝试创建一种将新节点推送到羊群的方法。

function addNode(){
  nodes.push({
    cluster: 2,
    radius: 5,
    x: Math.cos(3 / 4 * 2 * Math.PI) * 200 + width / 2 + Math.random(),
    y: Math.sin(5 / 4 * 2 * Math.PI) * 200 + height / 2 + Math.random()
  });
  console.log(nodes);
  update();
}

$('button').click(function(){
  addNode();
})

我正在使用相同的簇和半径值创建新节点，但 x 和 y 的值是随机的。

这是fiddle ，但它没有按预期工作。

Answer 1

你已经快到了，这只是一些小事情:

• 您在更新函数中通过“circle.node”进行选择，但尚未将“node”类分配给初始圆圈。
• 您正在使用 d.size 设置新圆的半径，但不要设置 d.size，而是设置 d.radius。
• 您在 .data() 之后立即调用 .style(...) 并将结果保存为新选择。这会扰乱进入和退出选择。

最后，您没有在 fiddle 中包含 JQuery，因此该按钮不起作用。示例将解决所有这些问题 here .