Berechnen des Bogens/Punkts in d3-Pfad

Question

Ich habe Mühe, die richtige Geometrie zu finden, um einen Mittelpunkt eines Pfads entlang eines Bogens zu finden. Sagen wir, ich habe zwei Punkte: x1, y1 und x2, y2. wie unten in einer Linie:

x1, y1 ist A. x2, y2 B.

Im Versuch, eine Funktion zu schreiben, die den Abstand i liefern können (-1 oder 1) im obigen Bild und es gibt die x- und y-Koordinaten zurück.

[update]

Sie müssen verwenden, um den Winkel der Linie Figur aus x und y im Blick: So kann ich einen mittleren Punkt in dem Pfad hinzufügen können Sie die Zeile die folgenden machen zum. Unten wird angezeigt, dass die Linie 45 Grad beträgt, eine Seite des Dreiecks ist 5, eine Seite ist 1. Daraus können Sie x und y berechnen.

Ich glaube, ich es mit dem Code unten herausgefunden und Geige fiddle Beispiel:

var svgContainer = d3.select("#canvas").append("svg") 
             .attr("width", 400) 
             .attr("height", 400); 

var lineData = [ { "x": 0, "y": 0}, { "x": 100, "y": 100}]; 

var midPoint = { 
    x:Math.abs(lineData[1].x - lineData[0].x)/2, 
    y:Math.abs(lineData[1].x - lineData[0].x)/2 
}; 

function calcAngle(x1, x2, y1, y2) { 
    var calcAngleVal = Math.atan2(x1-x2,y1-y2)*(180/Math.PI); 

    if (calcAngleVal < 0) { 
     calcAngleVal = Math.abs(calcAngleVal); 
    } else{ 
     calcAngleVal = 360 - calcAngleVal; 
    } 

    return calcAngleVal; 
} 

var angle = calcAngle(lineData[0].x, lineData[1].x,lineData[0].y,lineData[1].y); 


var sin = Math.sin(angle * Math.PI/180); 
var cos = Math.cos(angle * Math.PI/180); 

var xLen = Math.abs(lineData[1].x - lineData[0].x)/2; 
var yLen = Math.abs(lineData[1].y - lineData[0].y)/2; 


var n = 1.5; 

var midpointArc = { 
    x: midPoint.x + (sin * (n * 25)), 
    y: midPoint.y + (cos * (n * 25)) 
}; 

lineData.splice(1,0,midpointArc); 

var lineFunction = d3.svg.line() 
         .x(function(d) { return d.x; }) 
         .y(function(d) { return d.y; }) 
         .interpolate("basis"); 

var lineGraph = svgContainer.append("path") 
          .attr("d", lineFunction(lineData)) 
          .attr("stroke", "blue") 
          .attr("stroke-width", 1) 
          .attr("fill", "none"); 

var pathEl = lineGraph.node(); 
var curvedMidpoint = pathEl.getPointAtLength(pathEl.getTotalLength()/2); 

svgContainer.append("circle") 
      .attr('r',5) 
      .attr('cx', curvedMidpoint.x) 
      .attr('cy', curvedMidpoint.y) 

Answer 1

Um den Mittelpunkt jeder Pfad (nicht nur einen Bogen) zu finden:

var pathEl = d3.select('#pathId').node(); 
var midpoint = pathEl.getPointAtLength(pathEl.getTotalLength()/2); 

, angepasst von Duopixels answer und bl.ockus.