D3.js D3如何为部队定向地图创建星形布局?

D3.js D3如何为部队定向地图创建星形布局?,d3.js,tree,force-layout,D3.js,Tree,Force Layout,我可以构建一个默认的力定向贴图,也可以构建一个树形贴图。但是我需要构建一个星形网络拓扑图。我不知道该怎么做,因为我似乎找不到这样做的指南。如果有人能给我指点方向或资源,我将不胜感激。谢谢 我用于渲染树拓扑的代码如下所示: var k = 6 * e.alpha; graph.links.forEach(function(d, i) { d.source.y -= k; d.target.y += k;

我可以构建一个默认的力定向贴图,也可以构建一个树形贴图。但是我需要构建一个星形网络拓扑图。我不知道该怎么做,因为我似乎找不到这样做的指南。如果有人能给我指点方向或资源,我将不胜感激。谢谢

我用于渲染树拓扑的代码如下所示:

var k = 6 * e.alpha; graph.links.forEach(function(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; }); var k=6*e.alpha; 图.links.forEach(函数(d,i){ d、 来源:y-=k; d、 目标y+=k; }); attr(“cx”,函数(d){return d.x;}) .attr(“cy”,函数(d){返回d.y;}); attr(“x1”,函数(d){返回d.source.x;}) .attr(“y1”,函数(d){返回d.source.y;}) .attr(“x2”,函数(d){返回d.target.x;}) .attr(“y2”,函数(d){返回d.target.y;}); 以下是我试图呈现的内容


看看这个例子:

如果检查代码,您将看到根节点经过特殊处理,使其始终保持在图形的中心。如果您不需要或没有这样的节点,您可以“发明”它,而不显示它,但仍然可以使用它来运行force布局,以获得剩余节点的星形排列

初始化时,root的属性
fixed
设置为true,以便d3 force layout simulation不会移动它。此外,它位于包含布局的矩形的中心:

root.fixed = true;
root.x = width / 2;
root.y = height / 2;
当然,您需要更改或添加一些代码,以便将每个圆的颜色更改为依赖于特定的其他属性,但核心布局思想在我链接的示例中


希望这有帮助。如果您有问题,需要澄清等,请告诉我。

您能分享使用此布局绘制的图形的图片,和/或描述使用所需布局绘制的图形之前是如何制作的吗?我编辑了原始版本,这可能会让您更好地了解我的目的。听起来您可能需要为此定制布局。如果您对最终布局没有特殊要求(在本例中确实有),那么force布局非常好。