d3.js带有分层有向图布局的自定义Sankey图

Question

我对d3.js（以及一般的SVG）很新，我想做一些简单的事情：基于合同的组织关系。

简介：

我正在尝试根据公司之间的财务关系生成图表，以便根据资金流量可视化潜在的欺诈行为。数据由合同/协议DB生成。我试图在下面的图像中显示我脑海中的想象。

最终图表：

该图有两个主要组成部分 - 组织和合同。

该图以组织开头。在它的右侧是该组织正在支付的所有合同。接下来是这些付款的目的地。

例如，第一行代表 Apple Inc 如何根据合同“根据许可证3.0开发iPhone X部件支付 Manufacturing Company Inc ”。在每个合同中都有小方框，代表从来源到目的地公司的付款（绿色表示“已付”，白色表示“欠”）

问题

有没有办法可以用d3.js来解决这个问题。布局和排序。我试图在jQuery中实现这一点，我在正确排序每个合同时遇到了重大问题，这样链接就不会搞砸了。

我使用以下示例作为起点但无处可去：

• https://bl.ocks.org/mbostock/2966094
• https://bl.ocks.org/mbostock/4063570
• https://bl.ocks.org/mbostock/4339184

经过广泛研究后，我发现有一个称为“Layered Graph Drawing”的术语/算法。简而言之，排序算法的想法是以没有交叉（或尽可能小）的方式对所有节点和连接进行排序

请帮帮我。我在互联网上搜索了几天试图找到解决方案，但没有运气。