-1
我想使用電弧d3.js
函數繪製通過點B開始在點A處和在點結束它C.繪製的SVG弧
我想知道是否有使用d3函數的方式,例如。 d3.radialLine()或d3.path()。arcTo()可能與其他d3函數結合使用,而不必爲任何數據編寫數學代碼。
我想使用電弧d3.js
函數繪製通過點B開始在點A處和在點結束它C.繪製的SVG弧
我想知道是否有使用d3函數的方式,例如。 d3.radialLine()或d3.path()。arcTo()可能與其他d3函數結合使用,而不必爲任何數據編寫數學代碼。
沒有建在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))
}
非常感謝! – Risingson
我不會把它標記爲重複的,因爲它不是具體到' D3'但[這可能是你在找什麼](http://stackoverflow.com/questions/22791951/algorithm-to-find-an-arc-its-center-radius-and-angles-given-3-點)... – Mark
謝謝馬克,但我想知道是否有一種方法使用d3函數,如d3.radialLine或d3.path()。arcTo(),而不必編寫數學代碼。 – Risingson