我正在寻找建议或一些想法。我需要构建一些D3图表(看起来像组织图表),但具有一些高级功能。必须将某些节点与另一个带有路径连接的节点连接。看起来像屏幕截图1.应该分开这些行(每个连接 - 不同的行)。
我想做的是:为每个节点提供一定余地的其他点,并根据这些点(此处的可视化)构建一条路径,并为每条单独的行添加一些填充。
我不能选择其他类型的图表。
我当前的图形外观在这里:https://blog.zubasoft.at/examples/d3.js/orgchart/
关于如何建立这种连接的任何想法?
我相信您将必须为每个连接创建一个路径。例如,在视觉上,您将连接5像素向右移动,然后将10个像素移至底部,然后向右移动直至到达目标节点的中心,然后向上移动。
如果您对节点有固定的垂直和水平边距,制定这些规则不会太糟糕。
您需要找到两行之间的交叉点,但是Formulla很复杂,请参见https://en.wikipedia.org/wiki/wiki/line–line_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>