2012-05-08 59 views
5

一种简单的问题......我已经成功地使用了d3.svg.line生成器,但是现在我需要能够对整个生产线中的每个单独的段进行更多的控制。例如,每个细分受众群可能需要着色不同。或者每个区段甚至可能需要不同的厚度(逐渐变细或取决于相邻区段的厚度)。通过线段控制

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

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

回答

3

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

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

+0

感谢您的信息。我实际上正在考虑使用d3.svg.area来缩小片段的宽度。我还没有尝试过,但它似乎非常类似于d3.svg.line,除了我可以使用y0,y1来缩小宽度。我们会看看它是如何发展的。 –

+0

是的,如果你对线段之间的垂直连接感到满意,d3.svg.area会很好用。 – mbostock