使用 D3 强制布局显示社交图答案

【问题标题】：Show social graph with D3 force layout使用 D3 强制布局显示社交图
【发布时间】：2013-05-01 17:02:03
【问题描述】：

我想展示一个带有 三百个节点

的 D3（日期驱动文档）社交图

Json 数据如下所示。

{
  "nodes":[
{"name":"node1","group":1},
{"name":"node2","group":1},
{"name":"node3","group":1},
{"name":"node4","group":2},
{"name":"node5","group":2},
{"name":"node6","group":2}
],
"links":[
{"source":1,"target":0,"value":1},
{"source":2,"target":0,"value":1},
{"source":1,"target":2,"value":1},
{"source":3,"target":4,"value":1},
{"source":3,"target":5,"value":1},
{"source":4,"target":5,"value":1},
{"source":1,"target":3,"value":1}
]
}

现在我遇到了几个问题

当我对每个节点使用 node.append("image") 时，fps 太低了（就像暂停和跳过一样）！
在我使用 d3.layout.force().charge(whatever number).distance(10).charge(-100).size([width,height ])
现在我想显示一个包含组的社交图，节点有 profile_image 和 name！如何使我的图表清晰？需要很多建议和例子，谢谢！

【问题讨论】：

请在提问前做更多研究。您提到了几个问题，但没有向我们展示您的代码或您尝试克服这些问题的方法。特别是对于最后一个问题，必须由您自己完成工作 - 那里有数百个示例，您可以很容易地找到。

标签： d3.js force-layout

【解决方案1】：

对于问题 2，使用边界框。一个很好的例子可以在 tick 函数中找到here。

 node.attr("cx", function(d) { return d.x = Math.max(r, Math.min(w - r, d.x)); })
    .attr("cy", function(d) { return d.y = Math.max(r, Math.min(h - r, 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; });

这可以防止节点移动到边界框之外。

此外，您可以设置重力以保持节点集中。正如 Lars 在他的评论中提到的，没有列出可以帮助您进一步的代码。

【讨论】：