将新节点添加到集群力布局 [英] Adding new nodes to a clustered force layout

问题描述

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

Using the Mike Bostock example for clustered nodes, I'm trying to create a way to push a new node to the flock.

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。

I'm creating new nodes using the same values for cluster and radius but with random values for x & y.

以下是小提琴

Here is the fiddle, but it's not working as expected.

推荐答案

你几乎就在那里，它只是一些小事情：

You're almost there, it's just a few small things:

• 您在更新函数中选择circle.node，但尚未将node类分配给初始圈子。


• 您正在使用 d.size 设置新圈子的半径，但不要设置 d.size ，但 d.radius 。


• > .style（...），并保存结果作为新的选择。 .data（）

• You're selecting by "circle.node" in the update function, but you haven't assigned the "node" class to the initial circles.
• You're using d.size to set the radius of the new circle, but don't set d.size, but d.radius.
• You're calling .style(...) immediately after .data() and saving the result as the new selection. This messes up the enter and exit selections.

最后，您没有在您的小提琴中包含JQuery，因此按钮不会工作。示例将解决所有这些问题，此处。

Finally, you didn't include JQuery in your fiddle, so the button doesn't work. Example will all of these issues fixed here.

这篇关于将新节点添加到集群力布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！