d3.js - 控制线段

Question

一个简单的问题......我一直在成功地使用 d3.svg.line 生成器，但我现在需要能够对整个线路中的每个单独的部分进行更多的控制。例如，每个段可能需要不同的颜色。或者每个段甚至可能需要不同的厚度(逐渐变细，取决于相邻段的厚度)。

我想知道实现这一目标的最佳工具是什么。我在想或者也许。或者甚至可以继续使用 d3.svg.line 但让每个段成为自己的行。

用这种丰富的线条渲染寻找其他人的经验......

Answer 1

目前在 D3 中没有这方面的设施，但有一个 open feature request到端口 segmented lines来自普罗托维斯。 Protovis implementation有点复杂，因为它需要计算相邻线段的斜接连接，但这绝对是可行的。 SVG 2.0 可能包含获取描边路径轮廓的功能，这将消除在纯 JavaScript 中实现此功能的需要。

同时，您可以使用 SVG 的线元素或简单的两元素 d3.svg.line 来创建自己的线段。默认的stroke-linecap属性会在不同角度的相邻线条之间留下间隙；您可以使用 stroke-linecap: round;如果您希望它们重叠。