繪製的SVG弧

Question

我想使用電弧d3.js函數繪製通過點B開始在點A處和在點結束它C.

我想知道是否有使用d3函數的方式，例如。 d3.radialLine（）或d3.path（）。arcTo（）可能與其他d3函數結合使用，而不必爲任何數據編寫數學代碼。

Answer 1

沒有建在D3做路徑產生 - 你能搶我一個爲swoopy-drag寫道，雖然：

//convert 3 points to an Arc Path 
function calcCirclePath(points){ 
    var a = points[0].pos 
    var b = points[2].pos 
    var c = points[1].pos 

    var A = dist(b, c) 
    var B = dist(c, a) 
    var C = dist(a, b) 

    var angle = Math.acos((A*A + B*B - C*C)/(2*A*B)) 

    //calc radius of circle 
    var K = .5*A*B*Math.sin(angle) 
    var r = A*B*C/4/K 
    r = Math.round(r*1000)/1000 

    //large arc flag 
    var laf = +(Math.PI/2 > angle) 

    //sweep flag 
    var saf = +((b[0] - a[0])*(c[1] - a[1]) - (b[1] - a[1])*(c[0] - a[0]) < 0) 

    return ['M', a, 'A', r, r, 0, laf, saf, b].join(' ') 
} 

function dist(a, b){ 
    return Math.sqrt(
    Math.pow(a[0] - b[0], 2) + 
    Math.pow(a[1] - b[1], 2)) 
}