使用繪圖旭日圖的部門d3.js

Question

我需要繪製成旭日圖是這樣的：

正如你所看到的，這其實是旭日圖的一個部門。我可以爲主圓/弧設置startAngle和endAngle嗎？

編輯： 我的圖是這樣的： https://bl.ocks.org/mbostock/4063423

Answer 1

這是你在找什麼？

這裏是改變部分：

var partition = d3.layout.partition() 
    .sort(null) 
    .size([Math.PI, radius * radius]) // Previoulsy : .size([2 * Math.PI, radius * radius]) 
    .value(function(d) { return 1; }); 

var arc = d3.svg.arc() 
    .startAngle(function(d) { return d.x - Math.PI/2; }) // Previously : .startAngle(function(d) { return d.x; }) 
    .endAngle(function(d) { return d.x + d.dx - Math.PI/2; }) // Previously : .endAngle(function(d) { return d.x + d.dx; }) 
    .innerRadius(function(d) { return Math.sqrt(d.y); }) 
    .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); }); 

見現場演示：JSFiddle

Answer 2

你絕對可以設置由startAngle和endAngle來圈。

查看sunburst圖中的代碼片段。

var arc = d3.svg.arc() 
     .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); }) 
     .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); }) 
     .innerRadius(function(d) { return Math.max(0, d.y ? y(d.y) : d.y); }) 
     .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });