用D3.js制作一个旭日形图

Question

我正在学习D3而且喜欢它！ 我正在看书，我被困在一个做旭日图的练习中。

到目前为止，这是我的代码：

<div id="sunburst"></div>

   <%--Then write/append script to container--%>
   <script type="text/javascript">

       <%--Calculate the maximum radius--%>
       var width = 640, height = 400, maxRadius = Math.min(width,height)/2;

       var svg = d3.select("sunburst").append("svg")
           .attr("width", width)
           .attr("height", height);

      //Center sunburst parameter at (0,0), so it's easier to parameters
      var g = sag.append("g");
           .attr("transform", "translate(" + (width/2) + "," + (height/2) + ")");

      //Scales are D3 objects used to convert input values into svg coordinates (i.e. pixels).
      var theta = d3.scale.linear()
          .range([0,2 * Math.PI]);
      var radius = d3.scale.sqrt()
          .range([0,maxRadius]);

在这一点上，作者说默认域[0,1]正是我们在这个例子中所需要的。 我很困惑，因为theta和半径可以超过1，不是吗？ 我一定错过了一些明显的东西。

非常感谢您的宝贵时间！ :)

Answer 1

从scale函数输出的值确实可以大于1.这是range定义的值。 scale函数还有一个用于缩放的输入间隔，即domain ，在示例中未指定。 默认值为[0, 1] 。 然后，输入值（ domain间隔）将使用指定的缩放类型映射到输出值（跨越range间隔）：在此示例中为linear 。

所以完整版将是：

  var theta = d3.scale.linear()
      .domain([0,1])
      .range([0,2 * Math.PI]);

意思是0映射到0; 1映射到2 * pi; 0.5映射到pi ...

无论如何，在练习的例子中，我假设使用theta比例的输入将在[0,1]范围内，因此作者对此的评论是适当的默认值。

参考：
g3ub上的d3 v3 API参考
来自dashingd3js.com的示例