使用d3绘制svg弧线，已知弧线上的三个点。

Question

我想使用d3.js函数绘制一条弧线，从点A开始经过点B，最后在点C结束。

我想知道是否有一种方法可以使用d3函数，例如d3.radialLine()或d3.path().arcTo()，可能与其他d3函数结合使用，而无需编写任何数学代码。

- Risingson

---

我不会将其标记为重复，因为它与d3无关，但是这可能是您要寻找的内容... - Mark

谢谢你的回复，Mark。但是我想知道是否有一种方法可以使用d3函数（比如d3.radialLine或者d3.path().arcTo()）而不必编写数学代码。 - Risingson

Answer 1

在d3中没有内置的路径生成器可以做到这一点 - 不过你可以使用我为swoopy-drag编写的路径生成器：

//convert 3 points to an Arc Path 
function calcCirclePath(start, end, mid) {
  const A = dist(end, mid);
  const B = dist(mid, start);
  const C = dist(start, end);

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

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

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

  //sweep flag
  const saf = +((end[0] - start[0]) * (mid[1] - start[1]) - (end[1] - start[1]) * (mid[0] - start[0]) < 0);

  return ['M', start, 'A', r, r, 0, laf, saf, end].join(' ');
}

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

- Adam Pearce

---

K和4(A*B*C/4/K)是什么意思？ - doox911

https://en.wikipedia.org/wiki/Law_of_sines#Relation_to_the_circumcircle - Adam Pearce

你如何解决同样的问题，但是生成两个弧段而不是一个？ - Fuzzyma