2

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

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

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

4

2 回答 2

1

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

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

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

于 2015-10-16T21:35:12.847 回答
0

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

于 2015-10-16T21:47:01.083 回答