我正在尝试在 d3 中创建一个半圆。使用 cardinal interpolation产生一条接近我想要的路径,但不够“圆形”。如何编写自己的插值器来更好地绕过这条路径,或者有更好的方法吗?
这是我目前所拥有的:http://jsfiddle.net/Wexcode/jEfsh/
<svg width="300" height="500">
<g id="g-1"></g>
<g id="g-2"></g>
</svg>
JS:
var curved = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("cardinal")
.tension(0);
var straight = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("linear")
.tension(0);
var points = [{x: 70, y: 52.5}, {x: 250, y: 250}, {x: 70, y: 447.5}];
d3.select("#g-1").append("path").attr("d", curved(points));
d3.select("#g-2").append("path").attr("d", straight(points));
最佳答案
见:How to calculate the SVG Path for an arc (of a circle)
使用 d3.arc() 创建曲线的问题在于,它将两条线叠加在一起。见:https://stackoverflow.com/a/11595157/522877
d3.svg.line.radial()
在创建圆弧和圆方面有更多的控制权。
以下是如何创建圆圈的示例:http://jsfiddle.net/Wexcode/CrDUy/
var radius = 100,
padding = 10,
radians = 2 * Math.PI;
var dimension = (2 * radius) + (2 * padding),
points = 50;
var angle = d3.scale.linear()
.domain([0, points-1])
.range([0, radians]);
var line = d3.svg.line.radial()
.interpolate("basis")
.tension(0)
.radius(radius)
.angle(function(d, i) { return angle(i); });
var svg = d3.select("body").append("svg")
.attr("width", dimension)
.attr("height", dimension)
.append("g");
svg.append("path").datum(d3.range(points))
.attr("class", "line")
.attr("d", line)
.attr("transform", "translate(" + (radius + padding) + ", " + (radius + padding) + ")");
关于svg - 插值线以在 d3 中制作半圆/圆弧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11254806/