D3 sankey图 - 强制节点位置

Posted 2023-02-19

【中文标题】D3 sankey图 - 强制节点位置

【英文标题】：D3 sankey diagram - enforce node position

【发布时间】：2015-02-17 15:59:12

【问题描述】：

使用 D3 Sankey 插件，我正在使用新值更新 Sankey 图（更改数据、为节点和链接传递新值——保持所有这些值一致）。是否有像 d3.treemap 的 sticky 这样的功能来维护页面上的节点和链接顺序？如果没有，有没有办法构建它？

var sankey = d3.sankey()
    .nodeWidth(15)
    .nodePadding(10)
    .size([width, height]);
    .sticky(true)

我在这里遵循模式：http://bost.ocks.org/mike/sankey/

【参考方案1】：

不，没有。如果您想深入了解布局，请查看此处：

function computeNodeDepths(iterations) 
 var nodesByBreadth = d3.nest()
    .key(function(d)  return d.x; )
    .sortKeys(d3.ascending)
    .entries(nodes)
    .map(function(d)  return d.values; );

initializeNodeDepth();
...

注意 sortKeys 指向 d3.ascending。您希望它指向某种硬连线值，您需要在第一次迭代或数据准备中计算该值。当碰撞检测功能运行时它仍然会被调整，所以你可能会看到你的节点被推到了位置，但这会给你最好的机会来保持一些控制。

【讨论】：

谢谢——你知道 sortKeys 函数的结构吗？我猜 function(a,b) return myOrder.indexOf(a) - myOrder.indexOf(b)

这是 d3.nest() 的一部分，它需要一个排序函数，就像你发送到 Array.sort() 一样，这就像你描述的函数，但我不认为特别的一个会工作。我建议查看 Array.sort()。