There are two approaches to avoiding overlap in a d3 force layout.
The first is to adjust the parameters of the force object, the most relevant of which is the "charge" parameter. Nodes with negative "charge" values push other nodes away (versus nodes with positive values pull other nodes closer), and you can increase the amount of charge to cause a greater push.
The default value for the "charge" is -30, so from there you can adjust it until you get an effect you want. There's no simple formula for determining the value you want, since it also depends on the other parameters and the amount of links in your graph.
If for any reason adjusting the charge doesn't work for you (for example, if you want the nodes to cluster close to each other -- not repel each other -- but still not overlap), then you can manually check for overlapping nodes, as in this Mike Bostock example suggested by Josh in the comments.
- Prevent node overlap in force directed graph
- Add text label to d3 node in Force directed Graph and resize on hover
- D3 force directed graph with drag and drop support to make selected node position fixed when dropped
- Both single and double click on a node in d3 force directed graph
- Interactively fixing a node in a directed force graph
- d3js Force Directed Graph - Click on node to popup infobox which read from JSON
- Zooming to a clicked node on a D3 Force Directed Graph
- D3 force directed graph node - text is being duplicated when expading
- Highlight a node and its neighbour node in force directed graph
- d3 force directed graph using node names for links
- End points of the links of the force directed graph always stuck to left corner of the rectangular node
- force directed graph change color of all connected node on mouseover
- How to make d3js force directed graph less shaky when a node is dragged?
- d3.js Node Position in Force Directed Graph following Search
- D3.js - Changing force directed graph node from circle to svg:rect
- styling node label not working in d3 force directed graph
- parameterized D3js force directed graph node positioning
- force directed graph - define the color of a node, if the node is source and target at the same time
- Trying multiple approaches to make the node size of a force directed graph proportional to it's degree
- Vertically center a label consisting of multiple lines over a node in D3 force directed graph
- Search node in force directed graph using d3.js
- how to display the node attributes like person's name photo and address in a force directed graph
- Responsive force directed D3 graph with bounding box with different node radii
- Dynamically change background color of node in force directed graph
- unable to add label to node on force directed graph
- Fix Node Position in D3 Force Directed Layout
- Highlight selected node, its links, and its children in a D3 force directed graph
- Updating links on a force directed graph from dynamic json data
- Add text/label onto links in D3 force directed graph
- semantic zooming of the force directed graph in d3
More Query from same tag
- How to resize rectangle in d3 js
- Refresh function not being called properly d3
- Simulating Enter Key Press on Input in Karma/Jasmine Tests
- How to import a d3 v4 / v5 module into a Node project but keep the D3 v3 namespace style (d3.)?
- D3 change SVG dimensions on resize window
- D3 Graph - Add stroke to path
- Change: Add Label to Draggable Circle
- Creating hierarchical JSON from MySQL results and PHP for D3.js tree?
- Typescript class implementing interface with anonymous function
- Add spacing between axis and start point
- Omit null values in d3
- D3.js - Append objects outside of the selection
- Create graphs similar to Pew Research site
- D3 data not updating through onclick function
- D3- multiple radial progress charts
- How to .move() a selected brush?
- how to access json object after loading it in d3
- Google Chrome: How can I watch the state of the DOM while holding the mouse button
- How can you change the height of an x-axis with d3.js
- Interactive spider or radar chart using d3
- D3.js get the rendered dimensions of a tree when nodeSize is specified
- Why does 'd3.select("svg") == d3.select("svg")' resolve to 'false'?
- Change text color or display it on top of the path so the path won't cover it
- How can I use d3 force to space out overlapping points on a map
- Stopping a Line At the Outer Edge of a Circle
- Each parent-child pair has same color in D3 Hierarchy Typescript
- How to apply padding between D3 axes and chart?
- Angular directive within d3 SVG