优化D3中圆计算的路径距离

时间:2017-06-07 21:04:22

标签: javascript math d3.js svg geometry

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; }; 函数的主体,我不满意。

1 个答案:

答案 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

这就是全部。