2

NVD3 の lineChart モデルを拡張して、グラフの各線パスに沿って可変ストローク幅を許可する合理的に簡単な方法があるかどうかを調べようとしています。

具体的には、単純な折れ線グラフを扱っています。ここでは、さまざまなセクター (NVD3 の lineChart が完全に機能します) の雇用の前年比の伸びを示す必要があります。また、これらのセクターの相対的な重み (つまり、農業は全体的に数百人しか雇用していないのに成長しているかもしれませんが、小売業は苦戦しているかもしれませんが、依然として人口の大部分を雇用している可能性があります) - これはもちろん線形スケールではありませんが、各セクターの相対的な重みが異なると仮定します時間の経過とともに、太い線は細い線のセクターよりも多くの従業員がいるセクターを表す可能性があります。

明らかに、タイムスパン全体にわたる各セクターの平均ウェイトを使用して、ライン全体のストローク幅を非常に簡単に変更できますが、SVG で単一のパス要素のさまざまな幅を指定する方法がないことを理解する限り、次のようになります。 lineChart の上に構築された NVD3 モデルを作成することは理にかなっていますが、各線を前年比の個別の多角形 (三角形?) に分割します。

4

2 に答える 2

1

これに対する答えを自分で探しています。簡単な方法はないようですが、可能性の 1 つは stroke-dasharray 属性を使用することです。 http://owl3d.com/svg/vsw/articles/vsw_article.html

基本的に、ストローク幅の範囲をカバーする一連のクローン パスを作成できます。それらをダッシュ​​配列に変換すると、ダッシュ間の間隔を調整して、各ポイントでどのパスが表示されるかを制御できます。

探している形状と幅によっては、最初のパス要素とは異なるオフセットを持つ 2 番目のパス要素を追加することで、それをごまかすこともできます。

于 2015-10-16T21:35:12.847 に答える
0

おそらく、閉じたパスを生成し、そのパスにパターン塗りつぶしまたは通常の塗りつぶしを適用します。閉じたパスは事実上、さまざまな幅の線を模倣する三角形です。

于 2015-10-16T21:47:01.083 に答える