NVD3 lineChart中的可变笔划宽度

Question

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

具体地说，我正在处理一个简单的折线图，我需要在其中显示不同行业就业人数的同比增长(NVD3的lineChart对此非常有效)，同时也给出了这些行业的相对权重的概念(即农业可能在增长，而整体只有几百人，而零售业可能在苦苦挣扎，但仍然雇用了很大一部分人口)--这当然不是线性规模，但假设每个行业的相对权重随着时间的推移而变化，一条较粗的线可能代表一个拥有更多员工的行业，而不是一条细线。

显然，我可以很容易地使用整个时间范围内每个扇区的平均权重来更改整条线的笔划宽度，但据我所知，在SVG中无法指定单个路径元素的不同宽度:创建一个构建在lineChart之上但将每条线分割为离散多边形(三角形)的NVD3模型有意义吗？每一年的同比期间？

Answer 1

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

实际上，您可以创建一系列克隆路径，覆盖一定范围的描边宽度。如果将它们转换为虚线数组，则可以使用虚线之间的间距来控制哪些路径在每个点都可见。

根据您要查找的形状和宽度，您还可以通过添加与第一个路径元素具有不同偏移量的第二个路径元素来对其进行模糊处理。

Answer 2

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