d3-sankey-diagram 按类型对齐链接

Question

我正在尝试使用优秀的d3-sankey-diagram library by Rick Lupton to draw a sankey diagram. On the demo page "alignLinkTypes" is used to align links with the same types over nodes, but since November 2017 this keyword does not work any more; https://github.com/ricklupton/d3-sankey-diagram/commits/master/src/sankeyLayout/link-ordering.js。但是，应该可以使用端口来完成同样的事情。

我试图在自述文件、wiki 和源代码中搜索答案，但我还没有找到答案。

谁能告诉我如何像演示中那样对齐 link 类型？

Answer 1

很高兴您发现该库很有用！（我是作者）

不幸的是，如您所见，演示页面已过时。 Here is an example of using the new API (with "ports", which is a more flexible way of controlling alignment) in ipysankeywidget:

function alignLinkTypes(layout, align) {
  return layout
    .sourceId(function(d) { return { id: typeof d.source === "object" ? d.source.id : d.source,
                                     port: align ? d.type : null }; })
    .targetId(function(d) { return { id: typeof d.target === "object" ? d.target.id : d.target,
                                     port: align ? d.type : null }; });
}

如果 align 为真，这会告诉布局在识别其起点和终点时同时考虑 link 的 source 和 type（旧的"alignLinkTypes" 行为）；否则只考虑 source 和 target。

d3-sankey-diagram 按类型对齐链接

d3-sankey-diagram align links by type

d3.js

sankey-diagram