用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的示例