enclosing the nodes of a d3 force directed graph in a circle or a polygon or a cloud

Question

I have built a d3 force directed graph with grouped nodes. I want to enclose the groups inside cloud like structure. How can I do this?

Js Fiddle link for the graph: http://jsfiddle.net/Cfq9J/5/

My result should look similar to this image:

Answer 1

This is a tricky problem, and I'm not wholly sure you can do it in a performative way. You can see my static implementation here: http://jsfiddle.net/nrabinowitz/yPfJH/

and the dynamic implementation here, though it's quite slow and jittery: http://jsfiddle.net/nrabinowitz/9a7yy/

Notes on the implementation:

• This works by masking each circle with all of the other circles in its group. You might be able to speed this up with collision detection.

• Because each circle is both rendered and used as a mask, there's heavy use of use elements to reference the circle for each node. The actual circle is defined in a def element, a non-rendered definition for reuse. When this is run, each node will be rendered like this:

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

• I put node circles, links, and text each in a different g container, to layer them appropriately.

• You'd be better off including a data variable in your node data, rather than font size - I had to convert the fontSize property to an integer to use it for the circle radius. Even then, because the width of the text isn't tied to the data value, you'll get some text that's bigger than the circle beneath it.

• Not sure why the circle for the first node isn't placed correctly in the static version - it works in the dynamic one. Mystery.