D3.js 高级节点连接（查找路径）答案

【问题标题】：D3.js advanced node connections (find the path)D3.js 高级节点连接（查找路径）
【发布时间】：2019-03-05 15:08:53
【问题描述】：

我正在寻找建议或一些想法。我需要构建一些 D3 图表（看起来像组织结构图）但具有一些高级功能。一些节点必须通过路径连接与另一个节点连接。它看起来像screenshot 1。这些线应该分开（每个连接 - 不同的线）。

我的想法是：为每个节点添加一些边距的附加点，并基于这些点构建路径 (visual in here) 并为每条单独的线添加一些填充。

我无法选择其他类型的图表。

我当前的图表如下所示：https://blog.zubasoft.at/Examples/D3.js/OrgChart/

关于如何建立这种类型的连接有什么想法吗？

【问题讨论】：

标签： javascript d3.js search

【解决方案1】：

我相信您必须为每个连接创建一个path。例如，在您的视觉中，您会将连接向右移动 5 个像素，然后向底部移动 10 个像素，然后向右移动直到到达目标节点的中心，然后向上移动。

如果您为节点设置了固定的垂直和水平边距，那么制定这些规则并不会太糟糕。

【讨论】：

【解决方案2】：

您需要找到两条线之间的交点，但公式相当复杂，请参阅https://en.wikipedia.org/wiki/Line%E2%80%93line_intersection

您可以使用下面的演示作为起点

    var chart = new OrgChart(document.getElementById("tree"), {
        template: "ula",
        layout: BALKANGraph.mixed,
        mouseScroolBehaviour: BALKANGraph.none,
        scaleInitial: BALKANGraph.match.boundary,
        nodeBinding: {
            field_0: "name",
            field_1: "title",
            img_0: "img"
        },
        nodes: [
            { id: 1, name: "Jack Hill", title: "Chairman and CEO", email: "amber@domain.com", img: "https://balkangraph.com/js/img/1.jpg" },
            { id: 2, pid: 1, name: "Lexie Cole", title: "QA Lead", email: "ava@domain.com", img: "https://balkangraph.com/js/img/2.jpg" },
            { id: 3, pid: 1, name: "Janae Barrett", title: "Technical Director", img: "https://balkangraph.com/js/img/3.jpg" },
            { id: 4, pid: 1, name: "Aaliyah Webb", title: "Manager", email: "jay@domain.com", img: "https://balkangraph.com/js/img/4.jpg" },
            { id: 5, pid: 2, name: "Elliot Ross", title: "QA", img: "https://balkangraph.com/js/img/5.jpg" },
            { id: 6, pid: 2, name: "Anahi Gordon", title: "QA", img: "https://balkangraph.com/js/img/6.jpg" },
            { id: 7, pid: 2, name: "Knox Macias", title: "QA", img: "https://balkangraph.com/js/img/7.jpg" },
            { id: 8, pid: 3, name: "Nash Ingram", title: ".NET Team Lead", email: "kohen@domain.com", img: "https://balkangraph.com/js/img/8.jpg" },
            { id: 9, pid: 3, name: "Sage Barnett", title: "JS Team Lead", img: "https://balkangraph.com/js/img/9.jpg" },
            { id: 10, pid: 8, spids: [2], name: "Alice Gray", title: "Programmer & QA", img: "https://balkangraph.com/js/img/10.jpg" },
            { id: 11, pid: 8, name: "Anne Ewing", title: "Programmer", img: "https://balkangraph.com/js/img/11.jpg" },
            { id: 12, pid: 9, name: "Reuben Mcleod", title: "Programmer", img: "https://balkangraph.com/js/img/12.jpg" },
            { id: 13, pid: 9, name: "Ariel Wiley", title: "Programmer", img: "https://balkangraph.com/js/img/13.jpg" },
            { id: 14, pid: 4, name: "Lucas West", spids: [1], title: "Marketer", img: "https://balkangraph.com/js/img/14.jpg" },
            { id: 15, pid: 4, name: "Adan Travis", title: "Designer", img: "https://balkangraph.com/js/img/15.jpg" },
            { id: 16, pid: 4, name: "Alex Snider", title: "Sales Manager", img: "https://balkangraph.com/js/img/16.jpg" }
        ]
    });

html, body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    font-family: Helvetica;
    overflow: hidden;
}

#tree {
    width: 100%;
    height: 100%;
}

<script src="https://balkangraph.com/js/latest/OrgChart.js"></script>

<div id="tree"></div>

【讨论】：