Correct way to create network graph without overlaps using D3

Asked Jun 15 '19 at 05:49

Active Jun 15 '19 at 05:49

Viewed 86 times

I have a file of the following format:

{
   "nodes":[
      {
         "id":"abc",
         "label":"some-long-title"
      },
      {
         "id":"xyz",
         "label":"another-long-title"
      }
   ],
   "links":[
      {
         "source":"abc",
         "target":"xyz"
      }
   ]
}

and I want to create a network graph where the none of the nodes or labels are overlapping each other.

I understand that using a D3 force layout with a large negative charge strength would make the nodes repel each other. However, I don't want the snapping/ticking that comes with the force layout. Ideally, I want a graph like the following example: https://bl.ocks.org/mbostock/4557698

This example contains the (x,y) coordinates in the JSON node objects, which I don't want to generate myself. Is there a way to use the D3 library to generate the (x,y) coordinates initially in a nice, evenly spread way? Or is there a way to use the force layout for initial positioning only and turn off any kind of snapping/ticking of the nodes after?

asked Jun 15 '19 at 05:49

ejtt

what do you mean by "snapping / ticking"? – Coderino Javarino Jun 15 '19 at 06:14
Yes, using force layout for initial position only is a very common use case (particularly when dealing with labels) and pretty straight forward – Coderino Javarino Jun 15 '19 at 06:16
This may be useful: https://stackoverflow.com/a/47522074/5768908 – Gerardo Furtado Jun 15 '19 at 09:31

Correct way to create network graph without overlaps using D3

0 Answers0