Colors - InfographicsJa/d3 GitHub Wiki
Wiki ▸ API Reference ▸ Core ▸ Colors
ビジュアライゼーションを作成するには、しばしば色の作業が含まれています。たとえあなたのブラウザがたくさんの色に対応していたとしても、JavaScriptを通しての色の操作にはそれほど役に立ちません。D3は、RGB、HSL両方の表現を提供し、それぞれの色空間における補間や、色の明暗を変更することが可能です。色操作について詳しく知りたい場合には、 RGB または HSL をご覧ください。
Note: 直接的な色操作ができる一方で、D3の組み込み interpolateRgb, interpolateHsl そして scales もあります。
もし color palettes をお探しであれば、 ordinal scales referenceをご覧ください。
# d3.rgb(r, g, b)
指定された r, g そして b のchannel値で新しいRGB色を構成します。 それぞれのchannelは[0,255]の範囲の整数値として表されなければなりません。channelは戻り値オブジェクトの r, g そして b 属性として利用できます。
# d3.rgb(color)
指定された color 文字列をparseすることによって新たなRGB色を構成します。もし color が文字列でなければ、文字列に強制変換されます。したがって、このコンストラクタは既存の色のコピーを生成するために使われたり、 d3.hsl 色のRGBへの強制変換に使われたりします。color文字列には様々なformatがあります:
- rgb 10進数 - "rgb(255,255,255)"
- hsl 10進数 - "hsl(120,50%,20%)"
- rgb 16進数 - "#ffeeaa"
- rgb 簡略16進数 - "#fea"
- 名前 - "red", "white", "blue"
結果の色は、[0,255]の範囲のred, green そしてblueの整数channel値として保持されます。channelは戻り値オブジェクトの r, g そして b 属性として利用できます。named colors のリストはCSSで書かれています。もし色がHSL空間で表されていたら、hsl.rgb に相当する方式でRGBに変換されます。
# rgb.brighter([k])
この色のより明るいコピーを返します。それぞれのchannelは0.7 ^ -k 倍されます。もしgammaの値 k が省略されたら、デフォルトで1が適用されます。channelの値は最大値255、最小値30で制限されています。
# rgb.darker([k])
この色のより暗いコピーを返します。それぞれのchannelは0.7 ^ k 倍されます。もしgammaの値 k が省略されたら、デフォルトで1が適用されます。
# rgb.hsl()
HSL空間での相当色を返します。戻り値オブジェクトの詳細は d3.hsl を参照ください。HSLからRGBへの変換は CSS3 Color Module Level 3 に書かれています。これは逆オペレーションに相当します。
# rgb.toString()
このRGB色を、"#f7eaba"のような16進数の文字列に変換します。
# d3.hsl(h, s, l)
指定された色調 h 、彩度 s 、明度 l で新しいHSL色を構成します。色調は[0,360]の範囲の数でなければなりません。彩度、明度は[0,1]の範囲(パーセントは不可)でなければなりません。これらの値は、戻り値オブジェクトの h, s そして l 属性として利用できます。
# d3.hsl(color)
指定された color 文字列をparseすることによって新たなHSL色を構成します。もし color が文字列でなければ、文字列に強制変換されます。したがって、このコンストラクタは既存の色のコピーを生成するために使われたり、 d3.rgb 色のHSLへの強制変換に使われたりします。color文字列には様々なformatがあります:
- rgb 10進数 - "rgb(255,255,255)"
- hsl 10進数 - "hsl(120,50%,20%)"
- rgb 16進数 - "#ffeeaa"
- rgb 簡略16進数 - "#fea"
- 名前 - "red", "white", "blue"
結果の色は、[0,360]の範囲の色調, [0,1]の範囲の彩度、明度の値として保持されます。これらの値は戻り値オブジェクトの h, s そして l 属性として利用できます。named colors のリストはCSSで書かれています。もし色がRGB空間で表されていたら、rgb.hsl に相当する方式でHSLに変換されます。
# hsl.brighter([k])
この色のより明るいコピーを返します。明度channelは0.7 ^ -k 倍されます。もしgammaの値 k が省略されたら、デフォルトで1が適用されます。
# hsl.darker([k])
この色のより暗いコピーを返します。明度channelは0.7 ^ k 倍されます。もしgammaの値 k が省略されたら、デフォルトで1が適用されます。
# hsl.rgb()
RGB空間での相当色を返します。戻り値オブジェクトの詳細は d3.rgb を参照ください。HSLからRGBへの変換は CSS3 Color Module Level 3 に書かれています。
# hsl.toString()
このHSL色を、"#f7eaba"のようなRGBの16進数文字列に変換します。