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

Question

我正在使用 D3 创建圆弧，但我想用圆 Angular 绘制该弧。

下面是我的弧线截图:

我想要的是在弧线两侧设置圆 Angular ，如下所示:

完整的源代码是:

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

您的问题标题具有误导性:您想要的是绕过该路径的拐 Angular 。

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