D3 如何为力导向地图创建星形布局？

Question

我可以构建一个默认的力导向图，也可以构建一个树形图。但是我有一个需求是建立一个星形的网络拓扑图。我不确定如何去做，因为我似乎找不到这样做的指南。如果有人能指出我的方向或某些资源，我将不胜感激。谢谢。

我用来渲染树形拓扑的代码如下所示：

var k = 6 * e.alpha; graph.links.forEach(函数(d, i) { d.source.y -= k; d.target.y += k; }); node.attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }); link.attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; });

这是我想要渲染的内容。

Answer 1

看看这个例子：

link to jsfiddle

如果您检查代码，您会发现根节点经过特殊处理，使其始终位于图表的中心。如果您不需要或没有这样的节点，您可以“发明”它，而不是显示它，但仍然有它用于运行力布局以获得剩余节点的星形排列。

在初始化时，root 的属性fixed 设置为true，这样d3 强制布局模拟就不会移动它。此外，它被放置在包含布局的矩形的中心：

root.fixed = true;
root.x = width / 2;
root.y = height / 2;

当然，您需要更改或添加一些代码以更改每个圆圈的颜色以依赖于特定的其他属性，但核心布局思想在我链接的示例中。

希望这会有所帮助。如果您有任何问题、需要澄清等，请告诉我。