2012-05-08 13 views
5

簡単な質問の種類...私はd3.svg.line generatorをうまく使っていますが、今は線全体の個々の線分をより細かく制御できるようにする必要があります。例えば、各セグメントを異なる色にする必要があるかもしれない。あるいは、各セグメントは、異なる厚さ(テーパアウトまたは隣接セグメントの厚さに応じて)を必要とすることさえある。線分を制御する

これを達成するための最良のツールは何ですか?私は思っているか、多分。あるいは、d3.svg.lineを使い続けても、各セグメントをそれ自身の行にすることもできます。豊富なラインレンダリングのこの種の他の人の経験をお探し

...

答えて

3

D3で、このための現在の機能はありませんが、Protovisからポートsegmented linesからopen feature requestがあります。 Protovis implementationは、隣接する線分のマイター結合を計算する必要があるため、少し複雑ですが、間違いなく実行可能です。 SVG 2.0には、ストロークされたパスのアウトラインを取得する機能が含まれているため、純粋なJavaScriptでこれを実装する必要はありません。

一方、SVGの線要素または単純な2要素のd3.svg.lineを使用して、独自の線分を作成することができます。デフォルトのstroke-linecapプロパティは、異なる角度の隣接する線の間にギャップを残します。オーバーラップさせたい場合はstroke-linecap: round;を使用できます。

+0

ありがとうございます。セグメントの幅が異なる場合は、実際にd3.svg.areaを使用してテーパを行うことを検討していました。私はまだそれを試していないが、私はy0、y1を使って幅をテーパすることができる点を除いて、d3.svg.lineと非常によく似ています。私たちはそれがどうなるかを見ていきます。 –

+0

線分間の垂直結合に問題がなければ、d3.svg.areaはうまくいくはずです。 – mbostock