This example has been customized to include a unique distance for each link:
const N = 300;
const gData = {
nodes: [...Array(N).keys()].map(i => ({ id: i })),
links: [...Array(N).keys()]
.filter(id => id)
.map(id => {
var distance = (Math.random() < 0.2) ? 75 : 250;
var width = (distance == 75) ? 4 : 0.2;
return ({
source: id,
target: Math.round(Math.random() * (id-1)),
width: width,
distance: distance
})
})
};
const Graph = ForceGraph3D()
(document.getElementById('3d-graph'))
.graphData(gData)
.linkWidth('width')
.cameraPosition({ z: 600 })
.d3Force("link", d3.forceLink().distance(d => d.distance))
.d3Force("charge", d3.forceManyBody().theta(0.5).strength(-1));
<head>
<style> body { margin: 0; } </style>
<script src="//unpkg.com/3d-force-graph"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div id="3d-graph"></div>
</body>
The force API from d3 is used by the library to allow users to modify link parameters. The key difference lies in the usage of .d3Force() in the 3d-force-graph library, as opposed to .force() in d3.
To adjust the distance of each link, a distance attribute can be added to each link data point and then manipulated within the force layout using the d3Force accessor:
.d3Force("link", d3.forceLink().distance(d => d.distance))
This differs from a standard d3 force layout, where we would use:
.force("link", d3.forceLink().distance(d => d.distance))
resulting in:
const Graph = ForceGraph3D()
(document.getElementById('3d-graph'))
.graphData(gData)
.linkWidth('width')
.d3Force("link", d3.forceLink().distance(d => d.distance))
.d3Force("charge", d3.forceManyBody().theta(0.5).strength(-1));
The strength can also be adjusted using:
.d3Force("link", d3.forceLink().strength(d => d.strength))
In this demo, each link is randomly assigned a distance of either 75 or 250. Links with a smaller distance are given a larger width for clarity. The node distribution may require further tweaking for optimal results.