如何在D3.js中制作一个弧形躯干而不是另一个

Question

我的圆圈有2个圆弧，我希望一个圆弧比另一个圆弧厚。这是我的代码：

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

您可以更改想要更粗的弧的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); ：

使一个弧变薄的示例

{{1}}

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