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