javascript - 在 D3 捆绑布局中不断改变捆绑着色

Question

你好，

有没有可能在this中制作 bundle ？可视化:

... 看起来就像 that 中的 bundle 可视化

?

我不知道如何在 d3 中实现这一点。

编辑 1: 显然我必须编写一个自定义插值器。如何在不更改 d3 库的情况下扩展束插值器以在两种颜色之间进行额外的插值？

Answer 1

不幸的是，SVG 或 Canvas 都不支持沿路径描边渐变。我的方式 dependency tree visualization实现如下。对于每条路径:

1. 从基样条开始(参见 Hierarchical Edge Bundling )。
2. 转换为分段三次贝塞尔曲线(参见 BasisSpline.segments)。
3. 转换为分段线性曲线(即，折线；参见 Path.flatten)。
4. 分成等长的线性段(参见 Path.split )。

一旦有了这些线性段，就可以通过沿渐变计算适当的颜色来为每个段着色。因此，第一段绘制为绿色，最后一段绘制为红色，中间段绘制为介于两者之间的颜色。可以通过在等距点对基样条进行采样来组合步骤 2-4，但这需要更多的数学知识。

我的依赖树是在 Canvas 中实现的，但您可以通过为每个固定颜色的段创建单独的路径元素(或线元素)来在 SVG 中实现相同的效果。通过组合相同颜色的段，您可能会获得稍微更好的性能。