1

I try to draw a network graph using D3.js. For nodes, I do not provide their position (x,y), for links, I will provide their source, target and distance. However, the graph is always in 3D plane instead of 2d plane. My question is, is there anyway to draw the graph only in a 2D plane. I attached the graph right now, you can tell from the distance that they are not in a 2D plane.

enter image description here

Andrew Reid
  • 37,021
  • 7
  • 64
  • 83
guofangtt
  • 11
  • 2
  • They are on a 2d plane - unless you've heavily modified the standard d3 force to add a third dimension and a projection. Perhaps you are looking for something like this: https://stackoverflow.com/q/38253560/7106086 – Andrew Reid Apr 27 '18 at 19:02
  • The labelled distances don't match the actual distances because the d3 force is balancing the charge between nodes and link distance - a compromise is what is distorting your distances. – Andrew Reid Apr 27 '18 at 20:02
  • Thanks Andrew, I tried your solution under stackoverflow.com/q/38253560/7106086, the distance works good but another problem is nodes and links overlapping a lot. – guofangtt Apr 28 '18 at 21:19
  • That's the challenge of a self-organizing force: balancing different factors such as node proximity and link distance. No easy solution, perhaps the link distances you provided don't allow for a geometry that allow for ideal spacing of nodes (you could try scaling the distances up, or shrinking the nodes). As a graph get's more complicated link distance probably becomes a poor factor to control the visualization (if not an impossible factor to accurately represent). It may be that a d3 force won't achieve the ideal you are looking for. – Andrew Reid Apr 28 '18 at 22:16

0 Answers0