d3.js使用极坐标绘制元素 [英] d3.js Plot elements using polar coordinates

问题描述

我是d3.js的新用户，不知道要使用哪个d3功能。

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?

推荐答案

这样做的d3方法是传递数据并基于数据的索引计算位置，即

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

这篇关于d3.js使用极坐标绘制元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！