CODEWITHSUNDEEP
d3.js
Scott Cameron
Scott Cameron

Reputation: 5323

Control over line segments

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).

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...

Upvotes: 5

Views: 1174

Answers (1)

mbostock
mbostock

Reputation: 51829

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.

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.

Upvotes: 3

Related Questions