D3.js Elements Using Polar Coordinates

I am new to d3.js and don't know which d3 features to use.

I need to place a set of elements concentrically relative to the beginning (in a circle).

svg.selectAll('circle').each(function() { d3.select(this) .attr('cx', r * Math.cos(theta)) .attr('cy', r * Math.sin(theta)); theta += thetaInc; }); 

So, instead of doing something tedious like the code above, what is the short way d3 does it?

+4
source share
1 answer

Method d3 for this is to transmit data and calculate positions based on the data index, i.e. sort of

 var theta = 2 * Math.PI / array.length; svg.selectAll('circle').data(array).enter() .append("circle") .attr('cx', function(d, i) { return(r * Math.cos(i * theta)); }) .attr('cy', function(d, i) { return(r * Math.sin(i * theta)); }); 
+7
source

All Articles