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