d3.js - How to fix the configuration of the nodes that are returned? (D3, Javascript, Neo4j)

Question

We are new to D3 so please forgive me if I ask a stupid question. My developer and me have developed a user interface with D3 and as a default, it returns this:

However, this is not really user-friendly, since it is not clear what belongs to what. My ideal configuration would be something like this:

There are four nodes in total.

• The grey node is the center node, it should always be in the center.
• The green nodes are like 'subcategories', and they should always be in the circle around the center.
• The gold nodes are companies and they can be scattered around, but in the presence of the green nodes they belond to.
• The orange nodes are characteristics of the gold nodes and they should be scattered around the gold node that they belong to.

I hope you can give us some suggestions on how to approach this matter.

question from:https://stackoverflow.com/questions/65857395/how-to-fix-the-configuration-of-the-nodes-that-are-returned-d3-javascript-ne

Answer 1

What you described can be achieved with a force simulation where nodes repel themselves. Here is an example in D3.

Creating a simulation encompasses an understanding of how it works, how to prepare data for it, and how to implement it; which are complex and broad topics that couldn't be fully explained in a single SO question. As a general direction, I recommend looking into the d3 documentation for force simulations. For searches, the keywords you might want to look for are "force simulation graph layout d3". There are several blog posts and examples that can help you implement with much more detail.

Diving a litte bit on your specific scenario, the main difference from your requirements from usual examples is the fixed node at the center. The force simulation works by assigning x and y properties to the nodes, but there are two properties fx and fy that you can manually set to fix the node's position.

When preparing the data for the simulation, find the node you want to be in the center and add the properties fx and fy to match the center of the screen. The force simulation will automatically position the other nodes around it, very similar to your second illustration.