javascript - 如何绘制带有圆 Angular 的圆弧？

我正在使用D3创建圆弧，但是我想绘制带有圆角的弧。

以下是我的弧的屏幕截图：



我要在圆弧的两边设置圆角，如下所示：



完整的源代码是：

var tau = 2 * Math.PI; // http://tauday.com/tau-manifesto

// An arc function with all values bound except the endAngle. So, to compute an
// SVG path string for a given angle, we pass an object with an endAngle
// property to the `arc` function, and it will return the corresponding string.
var arc = d3.arc()
    .innerRadius(80)
    .outerRadius(140)
    .startAngle(0);

// Get the SVG container, and apply a transform such that the origin is the
// center of the canvas. This way, we don’t need to position arcs individually.
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

// Add the background arc, from 0 to 100% (tau).
var background = g.append("path")
    .datum({endAngle: tau})
    .style("fill", "#ddd")
    .attr("d", arc);

// Add the foreground arc in orange, currently showing 12.7%.
var foreground = g.append("path")
    .datum({endAngle: 0.627 * tau})
    .style("fill", "#e90b3a")
    .attr("d", arc);

CodePen在这里：https://codepen.io/zhaoyi0113/pen/PEgYZX

最佳答案

您的问题的标题具有误导性：您想要的是绕过那条路。

话虽这么说，使用cornerRadius：

var arc = d3.arc()
    .innerRadius(80)
    .outerRadius(140)
    .startAngle(0)
    .cornerRadius(30);

因此，在这种情况下，我使用的是30，即(outerRadius - innerRadius)/2。

这只是您所做的更改的代码：

var tau = 2 * Math.PI; // http://tauday.com/tau-manifesto

// An arc function with all values bound except the endAngle. So, to compute an
// SVG path string for a given angle, we pass an object with an endAngle
// property to the `arc` function, and it will return the corresponding string.
var arc = d3.arc()
    .innerRadius(80)
    .outerRadius(140)
    .startAngle(0)
    .cornerRadius(30);


// Get the SVG container, and apply a transform such that the origin is the
// center of the canvas. This way, we don’t need to position arcs individually.
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

// Add the background arc, from 0 to 100% (tau).
var background = g.append("path")
    .datum({endAngle: tau})
    .style("fill", "#ddd")
    .attr("d", arc);

// Add the foreground arc in orange, currently showing 12.7%.
var foreground = g.append("path")
    .datum({endAngle: 0.627 * tau})
    .style("fill", "#e90b3a")
    .attr("d", arc);

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="960" height="500"></svg>

关于javascript - 如何绘制带有圆 Angular 的圆弧？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48392894/