I am new to d3.js and not sure which d3 functionality to use.

I need to place a set of elements concentrically about an origin (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 above code, what is the d3 short way of doing this?

I am new to d3.js and not sure which d3 functionality to use.

I need to place a set of elements concentrically about an origin (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 above code, what is the d3 short way of doing this?

• javascript
• d3.js

1 Answer 1

The d3 way to do this would be to pass in the data and calculate the positions based on the index of the datum, i.e. something like

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)); });