控制线段

时间:2012-05-08 18:23:28

标签: d3.js

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

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

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

1 个答案:

答案 0 :(得分:3)

在D3中没有当前的设施,但Protovis有一个open feature request端口segmented linesProtovis implementation有点复杂,因为它需要计算相邻线段的斜接连接,但它绝对可行。 SVG 2.0可能包含一个获取描边路径轮廓的工具,这将消除在纯JavaScript中实现它的需要。

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