score:14

*Accepted answer*

**Unfortunately, the answer to your question does not exist.**

There is no built-in mechanism in D3 that repels edges or minimizes edge crossings. You would think it wouldn't be that hard to implement a charge on an edge, but here we are.

Furthermore, there doesn't seem to be any mechanism **anywhere** that reduces edge crossings in general. I've looked through dozens of visualization libraries and layout algorithms, and none of them deal with reducing edge crossings on a generic undirected graph.

There are a number of algorithms that work well for planar graphs, or 2-level graphs, or other simplifications. dagre works well in theory for 2-level graphs, although the utter lack of documentation makes it almost impossible to work with.

Part of the reason for this is that laying out graphs is **hard**. In particular, minimizing edge crossings is NP-hard, so I suspect that most layout designers hit that problem, bang their head against the keyboard a few times, and give up.

If anyone does come up with a good library for this, please publish it for the rest of us :)

score:-2

I have 'solved' the problem with this:

```
nodes[0].x = width / 2;
nodes[0].y = 100;
nodes[0].fixed = true;
force.on("tick", function(e) {
var kx = .4 * e.alpha, ky = 1.4 * e.alpha;
links.forEach(function(d, i) {
d.target.x += (d.source.x - d.target.x) * kx;
d.target.y += (d.source.y + 80 - d.target.y) * ky;
});
[...]
}
```

http://mbostock.github.io/d3/talk/20110921/parent-foci.html

It's not exactly what we wanted but better as before. Importend is, that you define a "root"-Node and fixed it.

```
nodes[0].fixed = true;
```

It look like more as a tree but so it is clearer.

score:0

I followed the Force Editor example and I saw that setting `charge`

and `linkDistance`

values solves the problem.

```
...
.charge(-200)
.linkDistance(50)
...
```

Screenshot:

score:5

Something that might be easier than trying to forcefully repel the edges is to wiggle the nodes around until the amount of crossing lines in the system is lower.

http://en.wikipedia.org/wiki/Simulated_annealing

Start with the nodes with the least amount of connections and wiggle down.

If you try and use the edges as nodes I suspect you're just going to get the same spatial locking problems. The solution is in figuring out where there are edge intersections and if they can be resolved. You might find that resolving many of the edge crossings is not possible

A more lateral approach to the visualization is to animate it such that it only shows a subset of the nodes and connections at a time. Or to make the edges transparent until the user places mouse focus over a node, which point the associated edges become more visible.

Source: stackoverflow.com

#### Related Query

- D3.js force directed graph, reduce edge crossings by making edges repel each other
- How to show edges in force directed graph using d3.js and Angular?
- Removing duplicate edges from an array for a d3 force directed graph
- How to make it so D3 Force Directed Graph generates nodes in same position each time
- How can I add text to edges in a force directed graph d3?
- 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 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
- Add text/label onto links in D3 force directed graph
- semantic zooming of the force directed graph in d3
- Is there a tap and double tap event in d3.js force directed graph
- D3 highlight selected node, and its links to parent and ancestors in a force directed graph
- Labels / text on the nodes of a D3 force directed graph
- D3 Force Directed Graph ajax update
- Introducing Arrow(directed), in Force Directed Graph d3
- D3.js force directed graph, each group different color?
- Prevent node overlap in force directed graph
- How do I control the bounce entry of a Force Directed Graph in D3?
- d3 force directed graph downward force simulation
- D3js Force Directed Graph Link not found
- enclosing the nodes of a d3 force directed graph in a circle or a polygon or a cloud
- Place pie charts on nodes of force directed layout graph in D3
- Zooming and brushing in d3 force directed graph
- Force Directed Graph Error, "Cannot Read Property 'Push' of Undefined"
- Adding label to the links in D3 force directed graph
- how to stop movement of force directed graph on force.start
- How to calculate in-degree, out-degree and weigted degree for force directed graph (d3.js)?
- Setting up D3 force directed graph
- Having trouble converting a D3 v3 Force Directed graph into D3 v4 library implementation?

#### More Query from same tag

- Iterating through circle elements in d3
- d3 line generator returning null rather than path data string
- d3 geo animation does not stop
- d3 javascript: reading json file
- D3.js transition callback on frame
- Lines on eclipse map not drawing to scale in d3.js map
- How to rotate d3 geo svg map
- How to apply a tween function on letters instead of numbers?
- Multi dynamics d3 charts on a same page
- D3.js Enter exit update pattern implementation
- How to different colours and legend in d3 js donut chart?
- How is it to debug the data() call in D3?
- How to add label above the scatter plot?
- I have a d3 project using fisheye, But why I have to point my mouse on the data point
- Convert a transition line chart to D3 v4
- d3.svg.line stroke is skewed when scaling y-dimension with SVG transform
- Force layout dragging, objects are far away from the correct position
- Not understanding d3 v4 new general update pattern in nested data
- How to show the unhighlighted/ not selected data points on scatter plots when using brush/group in dc.js? And is multiple brushes possible in dc.js
- parameter 1 is not of type 'SVGRect'
- Adding D3 librarie to Jhipster gateway
- How to draw a rectangle in D3.js with only 2 coordinates
- semantic zoom and panning d3.js v4
- JavaScript refresh file contents
- d3 custom scale, linear(x), draw start and end
- How to fix CORS error to serve fake development data
- C3js Quit curve on data point with zero value
- Programmatically open nested, collapsed (hidden) nodes in d3.js v6
- Using d3-zoom to interact with WebGL
- Why is that d3.js pie chart transition not working?