在D3中从圆计算中优化路径距离

在这个D3.js图中，我使用了直线时的魔术数字20和直线作为边缘时的30作为边距从路径中退出，以便在圆圈（图形节点）和路径（图形边缘）。

我还使用相当随机的数字1.5作为乘数来增加距离路径末端圆的距离，因为它有一个marker-end 。

给定19的圆半径和箭头路径坐标M0,0 V4 L2,2 Z ，我认为应该有可能计算路径应该具有的圆的准确距离（“边距”），但是我的数学技能只是没有不起作用了。 我还假设可以找出路径的方向，因此不再需要边界反演。

如果您有关于如何优化withMargins()函数中的距离和边距计算的withMargins() ，请提供答案。 所有优化和代码减少都是受欢迎的。 以下是相关的代码：

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

代码可能看起来有点不可思议，但这主要可以通过它正在从我正在开发的Reveal.js演示文稿中删除来解释。 我完全了解如何改进代码的其他部分，但它特别是我不满意的withMargins()函数的主体。

---

据我了解 - 第一个圆的中心（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

就这样。

链接地址: http://www.djcxy.com/p/84989.html

上一篇: Optimize path distance from circle calculation in D3

下一篇: How to determine distance to a point on arc perpendicular from tangent?