Как нарисовать дугу с массивом точек в 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 точками. Здесь используется этот один .

Затем вы можете вычислить радиус этого круга, вычислив расстояние между этим центром и одной из трех точек.

И вам также необходимо знать начальный и конечный углы дуги, основываясь на угле между первой точкой и центром окружности и угле между последней точкой и центром окружности. Это может быть достигнуто с помощью этой формулы .

---

По поводу чертежа:

Вот как вы можете нарисовать дугу с помощью 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] + ")");

И мы указываем начальный и конечный углы дуги следующим образом:

.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;