将d3力导向图的节点包围在圆形或多边形或云中

Question

我已经构建了一个d3带有分组节点的力导向图.我想将这些组封装在云状结构中.我怎样才能做到这一点？

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

我的结果应该与此图像类似:

Answer 1

这是一个棘手的问题,我不完全确定你能以表演的方式做到这一点.你可以在这里看到我的静态实现:http://jsfiddle.net/nrabinowitz/yPfJH/

和动态实现在这里,虽然它非常缓慢和紧张:http://jsfiddle.net/nrabinowitz/9a7yy/

实施说明:

• 这通过使用其组中的所有其他圆圈掩盖每个圆圈来工作.您可以通过碰撞检测加快速度.

• 因为每个圆都被渲染并用作掩模,所以大量使用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属性转换为整数,以便将其用于圆半径.即便如此,因为文本的宽度与数据值无关,所以你会得到一些比它下面的圆更大的文本.

• 不确定为什么第一个节点的圆圈没有在静态版本中正确放置 - 它在动态版本中工作.神秘.