variable stroke width in NVD3 lineChart

Question

i am trying to figure out if there is a reasonably easy way to extend NVD3's lineChart model to allow variable stroke widths along each line path in a chart.

specifically, i am dealing with a simple line chart where i need to show the year-on-year growth of employment in different sectors (for which NVD3's lineChart works perfectly), while also giving an idea of the relative weight of these sectors (i.e. agricolture might be growing while employing only a few hundred people overall, while retail might be struggling but still be employing a large percentage of the population) - this won't be a linear scale of course, but assuming that relative weight of each sector varies across time, a thicker line could represent a sector with more employees than one with a thin line.

obviously i could very easily change the stroke width for the whole line using i.e. an average weight of each sector across the whole timespan, but as far as i understand there is no way in SVG to specify a varying width of a single path element: would it make sense to create an NVD3 model that builds on top of lineChart but splits each line into discrete polygons (triangles?) for each year-on-year period?

Answer 1

Looking for an answer to this myself. It seems there is no easy way, but one possibility is to use the stroke-dasharray attribute. http://owl3d.com/svg/vsw/articles/vsw_article.html

Essentially, you can create a series of cloned paths, covering a range of stroke widths. If you turn them into dash arrays, you can play with the spacing between dashes to control which paths are visible at each point.

Depending on the shape and width you are looking for, you may also be able to fudge it by adding a second path element with a varying offset from the first.

Answer 2

Perhaps generate a closed path and apply a pattern fill or regular fill on that path. The closed path is effectively a triangle shape, to mimic a line of varied width.