我正在努力找出正确的几何形状来找到沿弧线的路径的中点。可以说我有两点:x1,y1 和 x2,y2。在如下一行中:
x1,y1 是 A。x2,y2 是 B。
我正在尝试编写一个函数,我可以提供上图中的距离(-1 或 1)并返回 x 和 y 坐标。这样我就可以在路径中添加一个中间点来呈现下面的线:
[更新]
你必须使用直线的 Angular 计算出我正在寻找的 x 和 y。下面显示直线是 45 度,三 Angular 形的一侧是 5,一侧是 1。由此,您可以计算出 x 和 y。
我想我用下面的代码弄明白了,然后摆弄 fiddle示例:
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)
最佳答案
要找到任何路径(不仅仅是弧)的中点:
var pathEl = d3.select('#pathId').node();
var midpoint = pathEl.getPointAtLength(pathEl.getTotalLength()/2);
关于javascript - 计算 d3 路径中的弧/点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18626808/