d3.js - 使用 d3 绘制 svg 弧，知道弧上的 3 个点

Question

我想用 d3.js 画一条弧线函数从 A 点开始，经过 B 点，在 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))
}