1

私はD3.jsを使い始めたばかりで、これを読んでいます：http: //alignedleft.com/tutorials/d3

棒グラフの作成に関するセクションでは、作成者は、ループ内の現在のデータを使用して長方形の塗りつぶし色のRGB値を指定する非常に簡単な例を示します。それはとても便利です。しかし、かなり制限されています。

たとえば、たとえば、データのさまざまな優先順位を示す特定のタイプのグラフがありました。したがって、値が高いほど、優先度が高くなります。優先度は、高、中、低、なしのそれぞれについて、赤、オレンジ、黄色、および緑の色で視覚化されます。

.attr('fill', function(d){})次のように、メソッドでswitchcaseまたはif/elseを使用するのはかなり簡単です。

.attr('fill', function(d) {
  if (percentage(d) <= 0.25) { // 0.25 is a percentage value representing the data
    return 'green';
  }
  else if (percentage(d) <= 0.50) {
    return 'yellow';
  }
  else if (percentage(d) <= 0.75) {
    return 'orange';
  }
  else if (percentage(d) <= 1) {
    return 'red';
  }
});

しかし、データの強度に基づいて色自体の強度/色合いを動的に変更したい場合はどうなりますか？したがって、基本的な色の値を持つだけでなく、次の色にシフトする前に、データの強度に応じて色を異なる色合い（または彩度）にすることで、その色の範囲内のデータの強度を視覚化します。

私が仮定した1つの方法は、パーセンテージごとに両方の戦略を組み合わせることですが、データの1％パーセンタイル表現ごとにすでに持っている5つのifステートメントのそれぞれに25のifステートメントをネストする必要があることを意味します。それを行うためのより良い、より効率的な方法はありますか？

各色の色合いの数をもっと少ない数に制限できることは承知していますが、条件文をネストする以外に他の方法があるかどうかを確認したいと思います。

4

1 に答える 1

3

1 つの方法は、d3.hslを使用して、色相、彩度、およびレベルの 3 つのパラメーターに関してカラー オブジェクトを構築することです。

上記で提案した switch ステートメントのようなものを使用して、目的の色相(緑、黄、オレンジ、赤) に対応する 0 から 360 までの数値を選択します。

彩度はおそらく 0.5 から 1 の間の定数です。これを試して、好きな彩度を選んでください。

レベルは 0 から 1 の間の数値になりますが、0 に近づきすぎないようにします。黒になるからです。この数値は、あなたが表現している強度に対応しています。強度が高いほど、数値が高くなり、したがって明るくなります。a を使用しd3.scale.linear()て、データ値を 0 ～ 1 の範囲に変換できます。

hsl color オブジェクトを作成したら、それを呼び出します.rgb()。これが、svg シェイプの塗りつぶし属性として設定したものです。

于 2013-02-28T02:50:23.963 に答える