Creating a single self-link on a node within a node-link diagram can be accomplished by following the instructions outlined in this resource: D3 Force Layout Self-Linking Node
If you need to draw multiple links on the same node, what modifications would you make?
I attempted to introduce a 'rotation' aspect based on the number of self-links present. I made adjustments to the code provided in the linked example as follows:
function tick() {
link.attr("d", function(d) {
var x1 = d.source.x,
y1 = d.source.y,
x2 = d.target.x,
y2 = d.target.y,
dx = x2 - x1,
dy = y2 - y1,
dr = Math.sqrt(dx * dx + dy * dy),
// Defaults for regular edge.
drx = dr,
dry = dr,
xRotation = 0,
largeArc = 0,
sweep = 1;
if ( x1 === x2 && y1 === y2 ) {
var index = getIndexOfDuplicateEdge();
var degree = 360 / numberOfDuplicateEdges();
var degreeForIndex = degree * index;
xRotation = degreeForIndex;
largeArc = 1;
drx = 30;
dry = 20;
x2 = x2 + 1;
y2 = y2 + 1;
}
return "M" + x1 + "," + y1 + "A" + drx + "," + dry + " " + xRotation + "," + largeArc + "," + sweep + " " + x2 + "," + y2;
});
Despite my efforts, the ellipses are not being rendered as anticipated and I'm struggling to find a solution. According to Mozilla's SVG documentation, the large-arc parameter must be 1 while the sweep parameter can toggle between 0 and 1 to create a mirrored effect. I've experimented with different values for xRotation, but I can't achieve the desired positioning for the ellipses.
The quantity of self-links may vary, and I aim to achieve an optimal distribution of ellipses across the nodes.
Ultimately, the goal is to have it resemble the visualization shown here: https://i.sstatic.net/teUxE.png