Javascript 与D3的关系图

Javascript 与D3的关系图,javascript,d3.js,data-visualization,graphing,Javascript,D3.js,Data Visualization,Graphing,我如何用D3创建下面的图表?我不知道这种可视化的名称,我能找到的最接近的是“力导向”图形 图例:填充节点是人,非填充节点是属性(例如,收藏夹颜色) 拼凑出一个大致但有效的版本: 基本上,我从一组人节点开始,这些节点上有一些属性。然后我循环遍历该属性并为每个属性生成新节点,向其添加一个target,将其链接回原始节点 从那里,您可以使用这两种节点类型上设置的属性设置它们的样式并创建相应的节点。这是我的版本: 易于显示系统性能和网络流量 code is not here 无耻的自我提升:你可能想试

我如何用D3创建下面的图表?我不知道这种可视化的名称,我能找到的最接近的是“力导向”图形

图例:填充节点是人,非填充节点是属性(例如,收藏夹颜色)


拼凑出一个大致但有效的版本:

基本上,我从一组
节点开始,这些节点上有一些属性。然后我循环遍历该属性并为每个属性生成新节点,向其添加一个
target
,将其链接回原始节点

从那里,您可以使用这两种节点类型上设置的属性设置它们的样式并创建相应的节点。

这是我的版本: 易于显示系统性能和网络流量

code is not here

无耻的自我提升:你可能想试试我的库(NetworkX图形库的一个端口)。它可以让你建模和可视化的图形(使用D3)。看起来像一个部队布局。如果您对节点位置有某些限制(例如,“中心”中的彩色节点),您必须自己实现这些限制。@Larskothoff您有没有这样做的示例,或者我可以参考一些资源来解决这个问题?我不知道有任何示例具有如此复杂的限制。