[英]How to draw an arc with rounded corners?
我正在使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.