d3.js - 控制线段

Question

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

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

用这种丰富的线条渲染找别人的经验……

Answer 1

目前 D3 中没有这方面的功能，但是有一个开放的功能请求可以从 Protovis移植分段线。Protovis 的实现有点复杂，因为它需要计算相邻线段的斜接，但它绝对是可行的。SVG 2.0 可能包含获取描边路径轮廓的工具，这将消除在纯 JavaScript 中实现这一点的需要。

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