0

我想展示一个带有三百个节点的 D3（Date-Driven-Documents）社交图

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}
]
}

现在我遇到了几个问题

  1. 当我对每个节点使用 node.append("image") 时，fps 太低了（就像暂停和跳过一样）！

  2. 在我使用 d3.layout.force().charge(whatever number).distance(10).charge(-100).size([width,height]) 之后，图表总是远离 center

  3. 现在我想展示一个带有组的社交图，节点有 profile_image 和 name ！如何使我的图表清晰？需要很多建议和例子，谢谢！

4

1 回答 1

1

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

 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 在他的评论中提到的，没有列出可以帮助您进一步的代码。

于 2013-05-03T14:38:50.667 回答