D3.js D3追加一条直线或矩形以填充饼图值

使用D3V5.15.0

我正在构建一个饼图，在这个饼图中，我想用一条直线或一个矩形来填充值（或者将拱门展平以这种方式显示？）。目前，我可以使用圆弧来填充它

删除图像

从“d3”导入*为d3；
常数startAngle=（-40*Math.PI）/180；
常数端角=（-40*Math.PI）/180+2*Math.PI；
常数宽度=500；
常数高度=数学最小值（宽度，500）；
函数DrawBenefitsValue（svg、数据、startArc）{
常数半径=数学最小值（宽度、高度）/2；
常数度弧度=度=>度*0.0174533；
const innerFactor=startArc；
常数outerFactor=value=>innerFactor+value*0.0509；
常数切片=度弧度（30）；
//TODO-有没有一种方法可以用计算出的圆弧绘制路径并避免forEach？
data.forEach（（ele，idx）=>{
const id=`gBenefits${idx}`；
恒色=
要素效益>4.75
？“#999A57”
：ele.benefits>3.33
？“#E2B465”
：ele.benefits>2
？“#E2B465”
：“#D3665D”；
const angleBegins=startAngle+idx*切片；
常数gridPie=d3
.pie（）
.startAngle（角度开始+0.05）
.endAngle（角度开始+切片）
.焊盘角度（0.05）
.sort（空）
.价值（1）；
常数弧=d3
.arc（）
.内半径（半径*内系数+1）
.outerRadius（半径*outerFactor（要素效益））
.焊盘半径（半径*2.5）
svg
.附加（“g”）
.attr（“id”，id）
.selectAll（`${id}`）
.数据（网格（[ele]））
.join（“路径”）
.attr（“d”，弧）
.attr（“类别”、“福利”）
.attr（“填充”，颜色）；
});
}

朋友帮我想出了一种骇人的解决方案。基本上，我将圆弧的起点和终点设置为相同。这当然会导致元素消失，因为不再有拱门，只有一条直线。然后，我添加了一个笔划和一个笔划宽度，以创建一个类似于拱门的矩形

const arc = d3
      .arc()
      .innerRadius(radius * outerFactor(ele.overuses))
      .startAngle(d => d.startAngle)
      .outerRadius(radius * innerFactor)
      .endAngle(d => d.startAngle);

svg
      .append("g")
      .attr("id", id)
      .selectAll(`#${id}`)
      .data(gridPie([ele]))
      .join("path")
      .attr("class", "benefits")
      .attr("fill", color)
      .attr("d", arc)
      .attr("stroke-width", "18")
      .attr("stroke", color);

---

你使用的是哪一个d3版本，我们可以得到一些示例数据吗？嗨@coola，我添加了一个代码沙盒，介绍了我正在使用的代码沙盒。轮子的代码可以在wheel.js中的drawBenefitsValues函数下找到，数据可以在index.js.Hi中找到。因此，我无法将截图与codesandbox匹配。你能提供完整的图片并突出显示你想要更改的部分以及它应该是什么样子吗？嗨#@Coola我刚刚添加了更大的图片，除了中间的辐条，其余的应该与我在代码沙盒中看到的大致相同。目前，这些值是沿着拱门路径生成的，当它们接收到这些值时，会生成有角度的矩形，但我正试图使它们更像前两幅图像中看到的普通矩形。我明白了，所以你可以计算圆弧，获得坐标，然后尝试获取圆弧的中点。然后可以创建从一个点到另一个点的路径？这种逻辑行得通吗？你试过了吗？