Question

我想用D3（日期驱动文档）显示带有 300个节点的社交图

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（无论数字）.distance（10）.charge（-100）.size（[width，height]之后，图表总是远离中心。 ]）
现在我想显示一个包含组的社交图，节点有profile_image和name！如何让我的图表清晰？需要很多建议和示例，谢谢！

Answer 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在评论中提到的那样，没有列出任何代码来帮助您。

使用D3力布局显示社交图

1 个答案: