时间戳

首页 > 解决方案 > d3-sankey-diagram 按类型对齐链接

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

问题描述

我正在尝试使用 Rick Lupton 出色的d3-sankey-diagram库来绘制 sankey 图。在演示页面上， “alignLinkTypes”用于在节点上对齐具有相同类型的链接，但自 2017 年 11 月起，该关键字不再起作用；https://github.com/ricklupton/d3-sankey-diagram/commits/master/src/sankeyLayout/link-ordering.js。但是，应该可以使用端口来完成同样的事情。

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

有人可以告诉我如何对齐演示中的链接类型吗？

标签： d3.jssankey-diagram

解决方案

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

不幸的是，正如您所见，演示页面已过时。这是在ipysankeywidget中使用新 API的示例（使用“端口”，这是一种更灵活的控制对齐方式）：

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为真，则告诉布局在识别其起点和终点时同时考虑链接的 和 （旧的“alignLinkTypes”行为）source；type否则只考虑sourceand target。

推荐阅读