NVD3 lineChart中的可变笔划宽度

Question

我试图弄清楚是否有一种相当简单的方法来扩展 NVD3 的 lineChart 模型，以允许沿图表中的每条线路径的可变笔划宽度。

具体来说，我正在处理一个简单的折线图，我需要在其中显示不同部门的就业同比增长（NVD3 的折线图完美地工作），同时也给出了这些的相对权重的概念部门（即农业可能正在增长，而总体上只雇用了几百人，而零售业可能正在苦苦挣扎，但仍然雇用了很大比例的人口）——这当然不是线性规模，但假设相对权重每个部门都随时间而变化，较细的线代表员工人数较多的部门。

显然我可以很容易地改变整条线的笔划宽度，即在整个时间跨度内每个扇区的平均权重，但据我了解，SVG 中没有办法指定单个路径的不同宽度element：创建一个建立在 lineChart 之上的 NVD3 模型是否有意义，但将每条线拆分为每个年同比的离散多边形（三角形？）？

Answer 1

我自己正在寻找这个问题的答案。似乎没有简单的方法，但一种可能性是使用 stroke-dasharray 属性。 http://owl3d.com/svg/vsw/articles/vsw_article.html

基本上，您可以创建一系列克隆路径，覆盖一系列笔划宽度。如果将它们转换为破折号数组，则可以使用破折号之间的间距来控制在每个点上可见的路径。

根据您要查找的形状和宽度，您还可以通过添加与第一个路径元素不同的偏移量的第二个路径元素来伪造它。

Answer 2

也许会生成一个封闭路径并在该路径上应用pattern 填充或常规填充。闭合路径实际上是一个三角形，以模拟一条不同宽度的线。