Lightweight Programming - Graph Analysis and Visualization - page 300

var link =
svg.selectAll("line").data(graph.links).enter()
.append("line")
.style("stroke", "blue")
.attr("x1", function(d) { return(rad *
Math.cos(d.source*ang)
+.5*width); })
.attr("y1", function(d) { return(rad *
Math.sin(d.source*ang)
+.5*width); })
.attr("x2", function(d) { return(rad *
Math.cos(d.target*ang)
+.5*width); })
.attr("y2", function(d) { return(rad *
Math.sin(d.target*ang)
+.5*width); });
// create the nodes and set out in a circular layout
var node =
svg.selectAll("circle").data(graph.nodes).enter()
.append("circle")
.attr("r", 6)
.attr("cx", function(d,i) { return(rad *
Math.cos(i*ang)
+ .5*width); })
.attr("cy", function(d,i) { return(rad *
Math.sin(i*ang)
+ .5*width); });
In this example, ang sets out the angle to increment each node based on the
number of items (measured in radians). rad sets the radius slightly smaller
than two times the width of the SVG area so that there is a bit of space left
for padding. This is essentially a scaling factor.
The x,y location of the nodes and link end points is then a function, where
x is a cosine of an angle ( index times the angle increment), scaled by the
radius ( r ), and offset by half the SVG area. (Otherwise, it would be centered
around the top corner, not in the center of the screen.)