d3Js - 如何在360d周围排列我的值并在圆圈中自动化数据？

Question

我有这样的数据：

var requiredDegrees = [0,30,60,90,120,150,180,210,240,270,300,330,360];

我想将这些数据安排在cirlce周围。如何计算并圈出我圈内的度数。

我希望通过3d.js创建与http://windhistory.com/station.html?KCFE相同的内容。任何人都可以在此提出正确的方法吗？

Answer 1

最简单的例子我可以编写代码：

var requiredDegrees = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330, 360];

var diameter = 300;

var svg = d3.select("body").append("svg")
  .attr("width", diameter + 50)
  .attr("height", diameter + 50)
  .append("g")
  .attr("transform", "translate(25,25)");

svg.append("circle")
  .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")")
  .attr("r", diameter / 2)

 svg.selectAll('text')
  .data(requiredDegrees)
  .enter()
  .append('text')
  .text(function(d) {
    return d;
  })
  .attr('transform', function(d) {
    return "translate(" + diameter / 2 + "," + 0 + ") rotate(" + d + ",0," + diameter / 2 + ")";
  });

示范here。