javascript - 如何在 d3 v4 中绘制带有点数组的圆弧

Question

我想从这样的点数组中绘制一条弧线:

var points = [
    [
        51.93326250000001,
        21.4375
    ],
    [
        36.72733749999999,
        40.603550000000002
    ],
    [
        21.527537500000008,
        21.4144
    ]
];

我尝试使用 d3.line()、d3.curveBasis() 和 d3.curveBundle.beta(1)。

var arcPath = d3.line()
    .x(function (d) {
         return d[0];
    })
    .y(function (d) {
         return d[1];
    })
    .curve(d3.curveBasis);
    var arc = node.append('path').attr("d", arcPath(points));

但是它画的是一条曲线:

这不是我要找的。我想要一个圆弧:

我不明白如何使用它:

var arc = d3.arc()
    .innerRadius(180)
    .outerRadius(240)
    .startAngle(0);

我的观点。

Answer 1

为了绘制圆弧，您需要知道与其关联的圆的圆心坐标及其半径。

在这种情况下，由于您的圆弧(圆的一部分)由 3 个点的坐标定义，您需要计算由这 3 个点定义的圆的中心:

var points = [
  [
    51.93326250000001,
    21.4375
  ],
  [
    36.72733749999999,
    40.603550000000002
  ],
  [
    21.527537500000008,
    21.4144
  ]
];

function calculateCircleCenter(A, B, C) {

  var yDelta_a = B[1] - A[1];
  var xDelta_a = B[0] - A[0];
  var yDelta_b = C[1] - B[1];
  var xDelta_b = C[0] - B[0];

  var center = [];

  var aSlope = yDelta_a / xDelta_a;
  var bSlope = yDelta_b / xDelta_b;

  center[0] = (aSlope*bSlope*(A[1] - C[1]) + bSlope*(A[0] + B[0]) - aSlope*(B[0]+C[0]) )/(2* (bSlope-aSlope) );
  center[1] = -1*(center[0] - (A[0]+B[0])/2)/aSlope +  (A[1]+B[1])/2;

  return center;
}

function distance(A, B) {
  var a = A[0] - B[0];
  var b = A[1] - B[1];
  return Math.sqrt(a*a + b*b);
}

var center = calculateCircleCenter(points[0], points[1], points[2]);

var radius = distance(points[0], center);

var svg = d3.select("svg").attr("width", 200).attr("height", 200);

// The circle
svg.append("circle")
  .attr("cx", center[0])
  .attr("cy", center[1])
  .attr("r", radius)
  .attr("fill", "white")
  .attr("stroke", "black");

var startAngle = Math.atan2(points[0][1] - center[1], points[0][0] - center[0]) + 0.5 * Math.PI;
var endAngle = Math.atan2(center[1] - points[2][1], center[0] - points[2][0]) + 1.5 * Math.PI;

var arc = d3.arc().innerRadius(radius).outerRadius(radius);

var sector = svg.append("path")
  .attr("fill", "none")
  .attr("stroke-width", 2)
  .attr("stroke", "blue")
  .attr("d", arc({ "startAngle": startAngle, "endAngle": endAngle }))
  .attr("transform", "translate(" + center[0] + "," + center[1] + ")");

// The 3 points:
svg.selectAll("small_circle")
  .data(points)
  .enter().append("circle")
  .attr("cx", function (d) { return d[0]; })
  .attr("cy", function (d) { return d[1]; })
  .attr("r", 2)
  .attr("fill", "red");

<svg></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>

---

关于数学:

您可以使用任何方法来计算由 3 个点定义的圆的中心。这里用到这个one .

然后，您可以通过计算该圆心与三个点之一之间的距离来计算该圆的半径。

并且您还需要根据第一个点与圆心之间的 Angular 以及最后一个点与圆心之间的 Angular 来知道弧的起点和终点 Angular 。这可以使用这个 formula 来实现.

---

关于绘图:

以下是使用 d3.js 绘制圆弧的方法:

var arc = d3.arc().innerRadius(radius).outerRadius(radius);

var sector = svg.append("path")
 .attr("fill", "none")
 .attr("stroke-width", 2)
 .attr("stroke", "blue")
 .attr("d", arc({ startAngle: 0.5 * Math.PI, endAngle: 1.5 * Math.PI }))
 .attr("transform", "translate(" + center[0] + "," + center[1] + ")");

圆弧由其半径定义。更具体地说是 innerRadius 和 outerRadius。在我们的例子中，这是一回事。

然后我们通过平移弧来指定弧的中心:

.attr("transform", "translate(" + center[0] + "," + center[1] + ")");

然后我们以这种方式指定圆弧的开始和结束 Angular :

.attr("d", arc({ "startAngle": startAngle, "endAngle": endAngle }))

其中 startAngle 和 endAngle 是根据第一个/最后一个点和中心计算的:

var startAngle = Math.atan2(points[0][1] - center[1], points[0][0] - center[0]) + 0.5 * Math.PI;
var endAngle = Math.atan2(center[1] - points[2][1], center[0] - points[2][0]) + 1.5 * Math.PI;