如何繪制帶有圓角的圓弧？

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>