在this D3.js graph中,当线条为直线时我使用幻数transaction_type
,当线条处于某个角度时使用20
作为退出路径的边距为了在圆(图形节点)和路径(图形边)之间添加边距。
我还使用相当随机的数字30
作为乘数,以进一步延长与路径末端的距离,因为它附加了1.5
鉴于marker-end
的圆半径和箭头路径坐标19
,我认为应该可以计算路径应具有的确切距离("边距")圈子,但我的数学技能并不适合它。我还假设可以找出路径的方向,因此不再需要边际反转。
如果您对如何优化M0,0 V4 L2,2 Z
功能中的距离和边距计算有所了解,请提供答案。欢迎所有优化和代码减少。这是相关代码:
withMargins()
代码可能看起来有点不稳定,但这很大程度上可以解释为它被我正在处理的Reveal.js演示文稿撕掉了。我也是关于如何改进代码的其他部分的想法,但它特别是this.withMargins = function() {
var diff = {
x: edge.end.x - edge.start.x,
y: edge.end.y - edge.start.y
};
var margins = {
start: {
x: 0,
y: 0
},
end: {
x: 0,
y: 0
}
};
if (diff.x > 0 && diff.y === 0) {
margins.start.x = 30;
} else if (diff.x < 0 && diff.y === 0) {
margins.start.x = -30;
} else if (diff.x > 0) {
margins.start.x = 20;
} else if (diff.x < 0) {
margins.start.x = -20;
}
if (diff.y > 0 && diff.x === 0) {
margins.start.y = 30;
} else if (diff.y < 0 && diff.x === 0) {
margins.start.y = -30;
} else if (diff.y > 0) {
margins.start.y = 20;
} else if (diff.y < 0) {
margins.start.y = -20;
}
if (margins.start.x != 0) {
margins.end.x = margins.start.x < 0 ?
Math.abs(margins.start.x * 1.5) :
margins.start.x * -1.5;
}
if (margins.start.y != 0) {
margins.end.y = margins.start.y < 0 ?
Math.abs(margins.start.y * 1.5) :
margins.start.y * -1.5;
}
// The top branch edges are inverted, so their margins
// needs to be inverted too.
if (edge.branch === 'top') {
var startX = margins.start.x;
var startY = margins.start.y;
margins.start.x = margins.end.x * -1;
margins.start.y = margins.end.y * -1;
margins.end.x = startX * -1;
margins.end.y = startY * -1;
}
edge.start.x += margins.start.x;
edge.start.y += margins.start.y;
edge.end.x += margins.end.x;
edge.end.y += margins.end.y;
return edge;
};
函数的主体,我不满意。
答案 0 :(得分:0)
据我所知 - 你有第一个圆的中心(x0,y0),第二个圆的中心(x1,y1),圆半径R,圆周长M的所需边距,想找到起点和终点箭头的坐标。
(似乎你使用圆心的全距离,在这种情况下设置为Marg)
dx = x1 - x0
dy = y1 - y0
Len = math.sqrt(dx * dx + dy * dy) //use math.hypot if available
Marg = R + M //full distance from circle center to arrow end. 30 in your case
Coeff = Marg / Len
ax0 = x0 + Coeff * dx //arrow start coords
ay0 = y0 + Coeff * dy
ax1 = x1 - Coeff * dx //arrow end
ay1 = y1 - Coeff * dy
这就是全部。