Frame91 - 4 months ago 31

Javascript Question

Drawing a single self-link on a node in a node-link diagram can be done as described here: D3 Force Layout Self-Linking Node

What would you change if you need to draw multiple links on the same node?

I tried to add a 'rotation' to it based on the number of self-links that exist.

Given the code from the linked example I made the following changes:

`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 normal edge.

drx = dr,

dry = dr,

xRotation = 0, // degrees

largeArc = 0, // 1 or 0

sweep = 1; // 1 or 0

// Self edge.

if ( x1 === x2 && y1 === y2 ) {

// Fiddle with this angle to get loop oriented.

var index = getIndexOfDuplicateEdge();

var degree = 360 / numberOfDuplicateEdges();

var degreeForIndex = degree * index;

xRotation = degreeForIndex; // Previously: -45;

// Needs to be 1.

largeArc = 1;

// Change sweep to change orientation of loop.

//sweep = 0; // I also tried to change it based on index % 2

// Make drx and dry different to get an ellipse

// instead of a circle.

drx = 30;

dry = 20;

// For whatever reason the arc collapses to a point if the beginning

// and ending points of the arc are the same, so kludge it.

x2 = x2 + 1;

y2 = y2 + 1;

}

return "M" + x1 + "," + y1 + "A" + drx + "," + dry + " " + xRotation + "," + largeArc + "," + sweep + " " + x2 + "," + y2;

});

This won't draw my ellipses as expected and I cannot find a way to handle this. Based on SVG from Mozilla the large-arc has to be 1. Sweep can be 0 or 1 and will 'mirror' my ellipsis. I can use xRotation between 90-180 with sweep 0/1 which will cover 180 degrees of my circle. However, i do not find a way to draw the ellipsis at the other 180 degree positions.

The number of self-links can vary, and I always want to have the 'best' distribution between ellipsis.

Ideally, it should look like:

Answer

The idea is to divide the circle into as many segments as petals your flower has. Then calculate the start- and end points for each petal on the circle and fitting an elipse on those points.

You can use the following code snippet to do achieve this: (the function assumes you have a svg element with the id "svgthing")

```
function radtodeg(angle) {
return angle * (180/Math.PI);
}
function flower( center_x, center_y, num_self_edges, start_angle, end_angle, radius, length ) {
var angle_sector = end_angle - start_angle;
var num_points = num_self_edges * 2;
var angle_per_point = angle_sector / num_points;
var angle_per_sector = angle_per_point * 2;
var str_builder = [];
for( var angle = start_angle; angle < end_angle; angle += angle_per_sector ) {
var start_sector_angle = angle;
var end_sector_angle = angle + angle_per_point;
var mid_sector_angle = angle + angle_per_point / 2;
var start_x = center_x + (radius * Math.cos(start_sector_angle));
var start_y = center_y + (radius * Math.sin(start_sector_angle));
var end_x = center_x + (radius * Math.cos(end_sector_angle));
var end_y = center_y + (radius * Math.sin(end_sector_angle));
var mid_x = center_x + (radius * Math.cos(mid_sector_angle));
var mid_y = center_y + (radius * Math.sin(mid_sector_angle));
str_builder.push("<path d='");
str_builder.push("M" + start_x + " " + start_y + ",");
str_builder.push("A " + length + " 1 " + radtodeg(mid_sector_angle) + " 0 1 " + end_x + " " + end_y);
str_builder.push("'/>\n");
str_builder.push("<circle cx='" + start_x + "' cy='" + start_y + "' r='5' />\n");
str_builder.push("<circle cx='" + end_x + "' cy='" + end_y + "' r='5'/>\n");
str_builder.push("<circle cx='" + mid_x + "' cy='" + mid_y + "' r='5'/>\n");
}
str_builder.push("<circle cx='" + center_x + "' cy='" + center_y + "' r='" + radius + "' />\n");
$("#svgthing").html(str_builder.join(""));
}
flower(60, 50, 8, 0, 2 * Math.PI, 50, 10);
```

The example call will generate a flower with 8 petals.