【发布时间】：2012-08-16 06:42:07
【问题描述】：
阿罗哈，
有没有可能在this可视化中制作捆绑包：
...看起来就像 that 可视化中的捆绑包
?
我不知道如何在 d3 中实现这一点。
编辑 1： 显然我必须编写一个自定义插值器。如何在不更改 d3 库的情况下扩展捆绑插值器以在两种颜色之间进行额外插值？
【问题讨论】：
标签： javascript svn graphics d3.js bundle-layout
【发布时间】：2012-08-16 06:42:07
【问题描述】：
不幸的是，SVG 或 Canvas 都不支持沿路径描边渐变。我的dependency tree visualization的实现方式如下。对于每条路径：
- 从基本样条开始（请参阅Hierarchical Edge Bundling）。
- 转换为分段三次贝塞尔曲线（请参阅BasisSpline.segments）。
- 转换为分段线性曲线（即，折线；参见Path.flatten）。
- 分割成等长的线性段（参见Path.split）。
获得这些线性段后，您可以通过沿渐变计算适当的颜色来为每个段着色。因此，第一段绘制为绿色，最后一段绘制为红色，中间段绘制为介于两者之间的颜色。可以通过在等距点对基样条进行采样来组合步骤 2-4，但这需要更多的数学运算。
我的依赖树是在 Canvas 中实现的，但是您可以在 SVG 中通过为每个恒定颜色段创建单独的路径元素（或线条元素）来实现相同的效果。通过组合相同颜色的片段，您可能会获得更好的性能。
【讨论】：
-
非常感谢。现在我知道我必须做什么了。
-
是的，您可以对线性段使用线性渐变（并对其他路径进行近似），但该技术不能推广到任意样条线。
-
嗨@mbostock 很好的解释，有没有办法将它与d3一起使用？我打算做的是在 SVG 中创建我的曲线，然后对于每条曲线，我将关联一个路径对象并使用它来检查相交。但是，它似乎很消耗内存。我可以将它与 queue.js 库结合使用。如果有更好的使用 d3js 的方法，我正在徘徊？