D3.jsのアークティッカーを作るにはどうすればいいですか

Question

私の円は2つの弧を持ちますが、私は1つの弧を他のものより太くします。ここに私のコードは次のとおりです。ここで

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のいずれかを変更することができます。

// 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

ここ

私はinnerRadiusを変更することにより、1つのアークを薄くした例であります