javascript - d3.js 使用极坐标绘制元素

Question

我是 d3.js 的新手，不确定要使用哪个 d3 功能。

我需要将一组元素同心地放在一个原点（在一个圆圈中）。

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

因此，不要像上面的代码那样做一些乏味的事情，做这件事的 d3 短方法是什么？

Answer 1

执行此操作的 d3 方法是传入数据并根据数据的索引计算位置，即类似于

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