コンテンツへスキップ

色補間

様々な色空間における色の補間器。

interpolateRgb(a, b)

js
d3.interpolateRgb("purple", "orange")

· ソースコード · 構成可能なガンマを使用して、2つの色ab間のRGB色空間補間器を返します。ガンマが指定されていない場合、デフォルトは1.0になります。色abはRGBである必要はなく、d3.rgbを使用してRGBに変換されます。補間器の戻り値はRGB文字列です。

interpolateRgbBasis(colors)

js
d3.interpolateRgbBasis(["purple", "green", "orange"])

· ソースコード · 指定されたcolors配列を通る均一な非有理Bスプライン補間器を返します。これらの色はRGB色空間に変換されます。補間器がt = 0でcolors[0]、t = 1でcolors[colors.length - 1]を返すように、暗黙的な制御点が生成されます。現在、不透明度の補間はサポートされていません。d3.interpolateBasisも参照してください。また、例についてはd3-scale-chromaticを参照してください。

interpolateRgbBasisClosed(colors)

js
d3.interpolateRgbBasisClosed(["purple", "green", "orange"])

· ソースコード · 指定されたcolors配列を通る均一な非有理Bスプライン補間器を返します。これらの色はRGB色空間に変換されます。制御点は、結果のスプラインが[0,1]のtで繰り返し適用された場合に循環C²連続性を有するように暗黙的に繰り返されます。これは、例えば、循環色スケールを作成するのに役立ちます。現在、不透明度の補間はサポートされていません。d3.interpolateBasisClosedも参照してください。また、例についてはd3-scale-chromaticを参照してください。

interpolateHsl(a, b)

js
d3.interpolateHsl("purple", "orange")

· ソースコード · 2つの色ab間のHSL色空間補間器を返します。色abはHSLである必要はなく、d3.hslを使用してHSLに変換されます。いずれかの色の色相または彩度がNaNの場合、反対側の色のチャンネル値が使用されます。色相間の最短経路が使用されます。補間器の戻り値はRGB文字列です。

interpolateHslLong(a, b)

js
d3.interpolateHslLong("purple", "orange")

· ソースコード · interpolateHslと同様ですが、色相間の最短経路は使用しません。

interpolateLab(a, b)

js
d3.interpolateLab("purple", "orange")

· ソースコード · 2つの色ab間のCIELAB色空間補間器を返します。色abはCIELABである必要はなく、d3.labを使用してCIELABに変換されます。補間器の戻り値はRGB文字列です。

interpolateHcl(a, b)

js
d3.interpolateHcl("purple", "orange")

· ソースコード · 2つの色ab間のCIELChab色空間補間器を返します。色abはCIELChabである必要はなく、d3.hclを使用してCIELChabに変換されます。いずれかの色の色相または彩度がNaNの場合、反対側の色のチャンネル値が使用されます。色相間の最短経路が使用されます。補間器の戻り値はRGB文字列です。

interpolateHclLong(a, b)

js
d3.interpolateHclLong("purple", "orange")

· ソースコード · interpolateHclと同様ですが、色相間の最短経路は使用しません。

interpolateCubehelix(a, b)

js
d3.interpolateCubehelix("purple", "orange")
js
d3.interpolateCubehelix.gamma(3)("purple", "orange")

· ソースコード · 構成可能なガンマを使用して、2つの色ab間のCubehelix色空間補間器を返します。ガンマが指定されていない場合、デフォルトは1.0になります。色abはCubehelixである必要はなく、d3.cubehelixを使用してCubehelixに変換されます。いずれかの色の色相または彩度がNaNの場合、反対側の色のチャンネル値が使用されます。色相間の最短経路が使用されます。補間器の戻り値はRGB文字列です。

interpolateCubehelixLong(a, b)

js
d3.interpolateCubehelixLong("purple", "orange")
js
d3.interpolateCubehelixLong.gamma(3)("purple", "orange")

· ソースコード · interpolateCubehelixと同様ですが、色相間の最短経路は使用しません。

interpolateColor.gamma(gamma)

js
d3.interpolateRgb.gamma(2.2)("purple", "orange")

interpolateinterpolateRgbinterpolateCubehelix、またはinterpolateCubehelixLongのいずれかである場合、指定されたgammaを使用して同じタイプの新しい補間器ファクトリを返します。ガンマ補正の詳細については、Eric Brasseurの記事Gamma error in picture scalingを参照してください。

interpolateHue(a, b)

js
d3.interpolateHue(20, 340)(0.5) // 0

· ソースコード · 2つの色相角ab間の補間器を返します。いずれかの色相がNaNの場合、反対側の値が使用されます。色相間の最短経路が使用されます。補間器の戻り値は[0, 360)の数値です。

標準的な補間器は、t = 0で開始値aからt = 1で終了値bにブレンドするのに対し、スプライン補間器は、区分的多項式関数を使用して、[0,1]のtに対して複数の入力値をスムーズにブレンドします。現在サポートされているのは、基底スプラインとしても知られる3次均一非有理Bスプラインのみです。