控制线段 [英] Control over line segments

问题描述

一个简单的问题...我已经成功使用d3.svg.line生成器，但我现在需要能够对整个行中的每个单独的段执行更多的控制。例如，每个片段可能需要不同地着色。或者每个区段甚至可能需要不同的厚度（根据相邻区段的厚度逐渐变细）。

Kind of a simple question... I've been using d3.svg.line generator successfully but I now need to be able to exercise more control over each individual segment in the overall line. For example, each segment may need to be colored differently. Or each segment might even need a different thickness (tapering out or in depending on the thickness of the adjacent segments).

我想知道什么是最好的工具这个。我在想或许。或者甚至可以只是继续使用d3.svg.line，但使每个段都有自己的行。

I'm wondering what is the best tool for achieving this. I'm thinking or maybe . Or maybe even just continue to use d3.svg.line but make each segment it's own line.

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

Looking for other people's experiences with this kind of rich line rendering...

推荐答案

D3中没有当前工具，但有一个打开功能请求到端口分段线。 Protovis实施有点复杂因为它需要计算相邻线段的斜角连接，但它绝对是可行的。 SVG 2.0可以包括一个获得描边路径轮廓的工具，这将不再需要在纯JavaScript中实现。

There's no current facility for this in D3, but there is an open feature request to port segmented lines from Protovis. The Protovis implementation is a bit complicated because it needs to calculate miter joins for adjacent line segments, but it's definitely doable. SVG 2.0 may include a facility to get the outline of a stroked path, which would eliminate the need to implement this in pure JavaScript.

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

In the meantime, you can use SVG's line element or a simple two-element d3.svg.line to create your own line segments. The default stroke-linecap property will leave gaps between adjacent lines of different angles; you can use stroke-linecap: round; if you would prefer them to overlap.

这篇关于控制线段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！