javascript - 在 D3 捆绑包布局中不断更改捆绑包颜色

Question

阿罗哈，

有没有可能在这个可视化中制作捆绑包：

...看起来就像该可视化中的捆绑包

?

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

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

Answer 1

不幸的是，SVG 或 Canvas 都不支持沿路径描边渐变。我的依赖树可视化的实现方式如下。对于每条路径：

1. 从基本样条开始（请参阅分层边捆绑）。
2. 转换为分段三次贝塞尔曲线（请参阅BasisSpline.segments）。
3. 转换为分段线性曲线（即折线；参见Path.flatten）。
4. 分割成等长的线性段（参见Path.split）。

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

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