使用 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))
}