插值線在d3中製作半個圓弧/弧線

Question

我正在嘗試在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)); 

Answer 1

參見：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) + ")"); 

Answer 2

你看着的arc section？