javascript - 将 d3 力定向图的节点封闭在圆形、多边形或云中

Question

我已经构建了一个带有分组节点的 d3 力定向图。我想将这些组封闭在云状结构中。我该怎么做？

图表的 Js Fiddle 链接:http://jsfiddle.net/Cfq9J/5/

我的结果应该类似于这张图片:

Answer 1

这是一个棘手的问题，我不完全确定您能否以一种表演的方式来解决这个问题。你可以在这里看到我的静态实现:http://jsfiddle.net/nrabinowitz/yPfJH/

还有这里的动态实现，虽然它很慢而且不稳定:http://jsfiddle.net/nrabinowitz/9a7yy/

实现注意事项:

• 这是通过用其组中的所有其他圆圈遮盖每个圆圈来实现的。您或许可以通过碰撞检测来加快速度。

• 因为每个圆都被渲染并用作 mask ，所以大量使用 use 元素来为每个节点引用圆。实际的圆在 def 元素中定义，这是一个非渲染定义以供重用。运行时，每个节点将呈现如下:

  <g class="node">
      <defs>
          <circle id="circlelanguages" r="46" transform="translate(388,458)" />
      </defs>
      <mask id="masklanguages">
          <!-- show the circle itself, as a base -->
          <use xlink:href="#circlelanguages" 
              fill="white" 
              stroke-width="2"
              stroke="white"></use>
          <!-- now hide all the other circles in the group -->
          <use class="other" xlink:href="#circleenglish" fill="black"></use>
          <use class="other" xlink:href="#circlereligion" fill="black">
          <!-- ... -->
      </mask>
      <!-- now render the circle, with its custom mask -->
      <use xlink:href="#circlelanguages"
          mask="url(#masklanguages)"
          style="fill: #ffffff; stroke: #1f77b4; " />
  </g>
  

• 我将节点圆圈、链接和文本分别放在不同的 g 容器中，以适本地对它们进行分层。

• 最好在节点数据中包含一个数据变量，而不是字体大小 - 我必须将 fontSize 属性转换为整数才能将其用于圆半径.即便如此，由于文本的宽度与数据值无关，您会得到一些比其下方的圆圈更大的文本。

• 不确定为什么第一个节点的圆在静态版本中没有正确放置 - 它在动态版本中有效。谜。