如何绘制圆角弧？

Question

我正在使用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

Answer 1

你的问题的标题是误导性的：你想要的是围绕那条道路的角落。

话虽如此，请使用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>