javascript - 我如何使这个内环更厚 - 换句话说，使内部白色圆圈的半径更小

Question

我怀疑对以下代码片段进行小的更改就能达到我想要的效果:

var arc = d3.svg.arc()
  .startAngle(function(d) {
    return d.x;
  })
  .endAngle(function(d) {
    return d.x + d.dx;
  })
  .outerRadius(function(d) {
    return Math.sqrt(d.y) * .9;
  })
  .innerRadius(function(d) {
    return Math.sqrt(d.y + d.dy);
  });

我希望实现的是使内环与外环一样厚，原因是我想向每个弧添加文本，因此两个环都需要相当厚:

http://plnkr.co/edit/zLOTF2o6ylKvHKw8DRU7?p=preview

Answer 1

如果您想让内环与外环显示相同的宽度，您必须在 outerRadius/innerRadius 中使用线性函数，而不是使用非线性函数，如 sqrt。

例如你可以试试这个:

var arc = d3.svg.arc()
    .startAngle(function(d) {
        return d.x;
    })
    .endAngle(function(d) {
        return d.x + d.dx;
    })
    .outerRadius(function(d) {
        return (d.y+d.dy) / radius;
    })
    .innerRadius(function(d) {
        return d.y / radius;
    });

在你的 plunk 中，它看起来像这样:

这取决于您的输入参数(此处为 d.dy)相等的条件。在您的 plunk 示例中，d.dy 始终为 7500。因此，要使内环比外环更厚，您必须调整输入参数。