6

SVGとD3を使用して棒グラフを作成していますが、それらに色を付ける方法について質問があります。このサイトや他のサイトで多くの質問を検索しましたが、同じ問題を抱えている人はまだ見つかりませんでした。

各バーの下部から1つの色（黄色など）で開始し、バーの高さが高くなるにつれて、2番目の色（赤など）を徐々に混ぜて、バーのポテンシャルが最大になるようにします。高さは2番目の色のみになります。この例では、潜在的な高さの半分であるバーの上部はオレンジ色になります。

任意の高さのバーに対して、必要に応じてバーに色を付ける独自の線形グラデーションを生成する関数を作成することができました。

ただし、このグラフは動的であり、データが更新されるとバーの高さが1秒間に何度も変化する可能性があるため、バーごとに新しいグラデーションを作成して適用することは明らかに効率的ではなく、更新に深刻な遅れが生じる可能性があります。バー。（静的テストケース以外で実際にこれを試したことがないことを認めます。そのため、最後の仮定について間違っている可能性があります。）

もちろん、静的グラデーションを使用すると、次のような結果が得られます。この場合、領域の高さではなく、バーの高さに応じて色が混合されます。

静的グラデーションを使用する

ただし、私の希望するシナリオでは、小さいバーの赤または紺はほとんどありません。

最後に、私の質問はこれです：する方法はありますか

  1. SVG領域自体に適用される単一のグラデーションを作成します（簡単）
  2. グラデーションがどういうわけかマスクされていると言っています（簡単）
  3. 次に、グラフのバーを表す長方形の下で選択的にマスクを解除しますか？（???）

または、私が見落としている他のテクニックはありますか？

ありがとう

4

1 に答える 1

16

これは実装が簡単ですが、理解するのが少し難しいので、グラデーションの単位を指定してから、、、、を介してuserSpaceOnUse適用する領域を定義する必要があります。x1x2y1y2

var gradient = svg
    .append("linearGradient")
    .attr("y1", minY)
    .attr("y2", maxY)
    .attr("x1", "0")
    .attr("x2", "0")
    .attr("id", "gradient")
    .attr("gradientUnits", "userSpaceOnUse")

gradient
    .append("stop")
    .attr("offset", "0")
    .attr("stop-color", "#ff0")

gradient
    .append("stop")
    .attr("offset", "0.5")
    .attr("stop-color", "#f00")

ここでデモを見ることができます：http：//jsfiddle.net/ZCwrx/

于 2012-10-11T00:00:27.143 に答える