javascript - 我怎样才能在 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);

这是代码笔: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);

代码笔:http://codepen.io/anon/pen/XMdgbG