D3.js

Question

我該如何製作一個弧線比其他的弧線我的弧線有兩個弧線，我希望一個弧線比另一個更厚。這裏是我的代碼：

var arcGenerator = d3.arc() 
    .innerRadius(80) 
    .outerRadius(100) 
    .padAngle(.02) 
    .padRadius(100); 

var arcData = [ 
    {startAngle: 0, endAngle: 1.2}, 
    {startAngle: 1.2, endAngle: 2* Math.PI} 
]; 

d3.select('g') 
    .selectAll('path') 
    .data(arcData) 
    .enter() 
    .append('path') 
    .attr('d', arcGenerator); 

這裏是codepen：http://codepen.io/ioan-ungurean/pen/aJNWMM

Answer 1

您可以變更的innerRadius或你想成爲較厚的圓弧outerRadius。

這裏就是我通過改變innerRadius製成一個弧較薄的例子：

// Remove innerRadius from this statement... 
var arcGenerator = d3.arc() 
    .outerRadius(100) 
    .padAngle(.02) 
    .padRadius(100) 
    .cornerRadius(4); 

// ...and add innerRadius here with different values for each arc 
var arcData = [ 
    {startAngle: 0, endAngle: 2.3, innerRadius: 50}, 
    {startAngle: 2.3, endAngle: 2* Math.PI, innerRadius: 80} 
]; 

d3.select('g') 
    .selectAll('path') 
    .data(arcData) 
    .enter() 
    .append('path') 
    .attr('d', arcGenerator); 

Codepen：http://codepen.io/anon/pen/XMdgbG