d3.js：如何创建“力导向图集群”

Question

我一直在研究d3.js库，尤其是力导向图的创建。我查阅了Bostock等人发表的论文，并注意到我试图创建的精确类型图表，基本上是一个以羽毛为组团的区域着色力导向图。

这是第三列，第二行的插图，标记为“force-directed graph clusters”： http://vis.stanford.edu/papers/d3 这里的代码生成基本图形： http://mbostock.github.com/d3/ex/force.html 我的问题是：动态生成区域多边形的代码是什么？

- AcroYogi

Answer 1

您可以尝试将示例外壳代码与力节点集成。

外壳： http://bl.ocks.org/mbostock/4341699 力布局： http://bl.ocks.org/mbostock/1021841 这是我在评论中提供的答案： http://bl.ocks.org/donaldh/2920551

- donaldh

---

那个，@donaldh，绝对是朝着正确方向的推进... 只要我是个编码人员就好了... 我是设计师，你能建议一些更具体的集成示例吗？ - AcroYogi

我想自己尝试一下，所以我已经对力学多焦点示例进行了修改，添加了一个凸包。http://bl.ocks.org/2918073。等我有机会时，我将扩展这个示例，创建一个围绕每个节点类别的路径。 - donaldh

好的，这是 v2 版本，每个节点簇都有一个凸包。http://bl.ocks.org/2920551。 bl.ocks.org 网站似乎现在无法访问，所以这里是 gist 的链接：https://gist.github.com/2920551。 - donaldh

哇，唐纳德！那太完美了！惊人！棒极了！谢谢你！ - AcroYogi

Answer 2

请查看D3代码库中的力导向集群示例。

- mbostock

---

谢谢Mike。我看了一下...那个有可扩展的圆表示聚类。代码是否可用于呈现如图所示的实际动态多边形？ - AcroYogi

链接现在是一个404错误页面。你能修复它吗？ - bluesmoon

这里是一个集群力布局的示例。 - dotcomXY

Answer 3

如果你是指创建图表中的圆形节点的代码：

   var node = svg.selectAll("circle.node")
       .data(json.nodes)
     .enter().append("circle")
       .attr("class", "node")
       .attr("r", 5)
       .style("fill", function(d) { return color(d.group); })
       .call(force.drag);

- trevorism