是否可以在D3朝阳图中更改弧的各个长度？

Question

我一直在使用D3解决我的一个项目的需求。要求是使电弧（更确切地说是最后一个电弧）具有不同的长度，这取决于电弧是否处于最佳状态。即：如果电弧是细长的，并且电弧很长，则表现不佳，而如果电弧又粗又短，则电弧表现最佳。

我只是想知道D3是否可行，因为我所看到的所有示例与我一直遵循的示例都具有相同的长度弧：https://beta.observablehq.com/@mbostock/d3-sunburst

我认为，当我设置 弧的角度。

const x = d3.scaleLinear()
    .range([0, 2 * Math.PI])
    .clamp(true);

const y = d3.scaleSqrt()
    .range([maxRadius * 0.07, maxRadius]);

const arc = d3.arc()
    .startAngle(d => x(d.x0))
    .endAngle(d => x(d.x1))
    .innerRadius(d => Math.max(0, y(d.y0)))
    .cornerRadius(10)
    .outerRadius(d => Math.max(0, y(d.y1)));

我希望实现的是代替此示例，在该示例中，弧具有相同的长度，而每个单独的弧具有不同的长度。我还将附上一张照片，以帮助传达我要解释的内容。

Answer 1

对于所有想知道如何执行此操作的人，我已经弄清楚了。

<script>
    googletag.cmd.push(function () {
     var adSlot = googletag.defineSlot('/xxxxxx/Mobile_ad', [[375, 60], [728, 60]], 'div-gpt-ad-154504231384304-0').addService(googletag.pubads());
      var mapping = googletag.sizeMapping().
        addSize([1024, 768], [970, 250]).
        addSize([980, 690], [728, 90]).
        addSize([640, 480], [120, 60]).
        addSize([0, 0], [88, 31]).
        // Fits browsers of any size smaller than 640 x 480
        build();
      adSlot.defineSizeMapping(mapping);

      googletag.pubads()
        .enableSingleRequest();
      googletag.enableServices();
    });
  </script>

我所做的是指定对于值为144的圆弧，将更改圆弧长度的开始和结束位置。我还将附上图片以显示最终结果：

D3 Sunburst Chart Arc Length Example