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函数的值 output 确实可以大于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]范围内，因此作者对此的评论是适当的默认值。

参考：
d3 v3 API reference on github
Example from dashingd3js.com

用D3.js制作一个旭日图

1 个答案: