D3js-colors-api
D3.js-Colors API
色は赤、緑、青を組み合わせて表示されます。 色は、次の異なる方法で指定することができます-
- 色名で
- RGB値として
- 16進値として
- HSL値として
- HWB値として
d3-color APIは、さまざまな色の表現を提供します。 APIで変換および操作操作を実行できます。 これらの操作を詳細に理解しましょう。
APIの構成
次のスクリプトを使用して、APIを直接ロードできます。
<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script>
</script>基本操作
D3の基本的なカラー操作を見てみましょう。
カラー値をHSLに変換-カラー値をHSLに変換するには、以下を使用します*例*-
var convert = d3.hsl("green");以下に示すように、色相を45°回転できます。
convert.h + = 45;同様に、飽和レベルも変更できます。 色の値をフェードするには、以下に示すように不透明度の値を変更できます。
convert.opacity = 0.5;カラーAPIメソッド
以下は、最も重要なColor APIメソッドの一部です。
- d3.color（指定子）
- color.opacity
- color.rgb（）
- color.toString（）
- color.displayable（）
- d3.rgb（色）
- d3.hsl（色）
- d3.lab（色）
- d3.hcl（色）
- d3.cubehelix（色）
これらの各Color APIメソッドを詳細に理解しましょう。
d3.color（指定子）
指定されたCSSカラーを解析し、RGBまたはHSLカラーを返すために使用されます。 指定子が指定されていない場合、nullが返されます。
例-次の例を考えてみましょう。
<script>
var color = d3.color("green"); //asign color name directly
console.log(color);
</script>画面に次の応答が表示されます-
{r: 0, g: 128, b: 0, opacity: 1}color.opacity
色をフェードしたい場合は、不透明度の値を変更できます。 [0、1]の範囲です。
例-次の例を考えてみましょう。
<script>
var color = d3.color("green");
console.log(color.opacity);
</script>画面に次の応答が表示されます-
1color.rgb（）
色のRGB値を返します。 次の例を考えてみましょう。
<script>
var color = d3.color("green");
console.log(color.rgb());
</script>画面に次の応答が表示されます。
{r: 0, g: 128, b: 0, opacity: 1}color.toString（）
CSS Object Model仕様に従って色を表す文字列を返します。 次の例を考えてみましょう。
<script>
var color = d3.color("green");
console.log(color.toString());
</script>画面に次の応答が表示されます。
rgb(0, 128, 0)color.displayable（）
色が表示可能な場合、trueを返します。 RGBカラー値が0未満または255より大きい場合、または不透明度が範囲[0、1]にない場合、falseを返します。 次の例を考えてみましょう。
<script>
var color = d3.color("green");
console.log(color.displayable());
</script>画面に次の応答が表示されます。
trued3.rgb（色）
このメソッドは、新しいRGBカラーを作成するために使用されます。 次の例を考えてみましょう。
<script>
console.log(d3.rgb("yellow"));
console.log(d3.rgb(200,100,0));
</script>画面に次の応答が表示されます。
{r: 255, g: 255, b: 0, opacity: 1}
{r: 200, g: 100, b: 0, opacity: 1}d3.hsl（色）
新しいHSLカラーを作成するために使用されます。 値は、返されたインスタンスのh、s、およびlプロパティとして公開されます。 次の例を考えてみましょう。
<script>
var hsl = d3.hsl("blue");
console.log(hsl.h + = 90);
console.log(hsl.opacity = 0.5);
</script>画面に次の応答が表示されます。
330
0.5d3.lab（色）
新しいLabカラーを構築します。 チャネル値は、返されたインスタンスの「l」、「a」、「b」プロパティとして公開されます。
<script>
var lab = d3.lab("blue");
console.log(lab);
</script>画面に次の応答が表示されます。
{l: 32.29701093285073, a: 79.18751984512221, b: -107.8601617541481, opacity: 1}d3.hcl（色）
新しいHCLカラーを構築します。 チャネル値は、返されたインスタンスのh、c、およびlプロパティとして公開されます。 次の例を考えてみましょう。
<script>
var hcl = d3.hcl("blue");
console.log(hcl);
</script>画面に次の応答が表示されます。
{h: 306.2849380699878, c: 133.80761485376166, l: 32.29701093285073, opacity: 1}d3.cubehelix（色）
新しいCubehelixカラーを構築します。 値は、返されたインスタンスのh、s、およびlプロパティとして公開されます。 次の例を考えてみましょう。
<script>
var hcl = d3.hcl("blue");
console.log(hcl);
</script>画面に次の応答が表示されます。
{h: 236.94217167732103, s: 4.614386868039719, l: 0.10999954957200976, opacity: 1}実施例
新しいWebページを作成してみましょう–すべてのカラーAPIメソッドを実行する colorl 。 完全なコードリストを以下に定義します。
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h3>D3 colors API</h3>
<script>
var color = d3.color("green");
console.log(color);
console.log(color.opacity);
console.log(color.rgb());
console.log(color.toString());
console.log(color.displayable());
console.log(d3.rgb("yellow"));
console.log(d3.rgb(200,100,0));
var hsl = d3.hsl("blue");
console.log(hsl.h + = 90);
console.log(hsl.opacity = 0.5);
var lab = d3.lab("blue");
console.log(lab);
var hcl = d3.hcl("blue");
console.log(hcl);
var cube = d3.cubehelix("blue");
console.log(cube);
</script>
</body>
</html>ここで、ブラウザをリクエストすると、次のレスポンスが表示されます。
