javascript - enclosing the nodes of a d3 force directed graph in a circle or a polygon or a cloud - Stack Overflow

admin管理员组

文章数量:1399901

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

My result should look similar to this image:

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/Cfq9J/5/

My result should look similar to this image:

• javascript
• d3.js
• force-layout

Share Improve this question Follow edited Oct 10, 2017 at 17:21 Cœur 38.8k2525 gold badges205205 silver badges277277 bronze badges asked Oct 15, 2012 at 4:21 Sunil RajSunil Raj 46055 silver badges2020 bronze badges 1

• Your data only shows one group - are there supposed to be more? – nrabinowitz Commented Oct 15, 2012 at 17:27

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

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/nrabinowitz/yPfJH/

and the dynamic implementation here, though it's quite slow and jittery: http://jsfiddle/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.

本文标签：