d3.hcl - HCL値を操作するコンストラクタを作成する

投稿日: / 更新日:

d3.jsのd3.hcl()は、HCL値を操作するためのインスタンスを作成するコンストラクタです。ここで作成したインスタンスを使って、用意された他の様々なメソッドを通してHCL値を加工できます。3つの引数でHCL値を指定するか、または、文字列でRGB、HSL、Hex、カラーネームを指定します。HCL値で指定する場合、第1引数のHは0〜360、CとLはそれぞれ0〜100で指定します。ドキュメントによると0〜1と説明されているが、実際はパーセンテージを指定すると意図した通りの挙動となります(確認中…)。

サンプルコード

// HCL値のインスタンスを作成 (3つの引数を使ってHCL値を指定)
var hcl = d3.hcl( 54, 72, 54 ) ;

// 文字列でHCL値を指定
var hcl = d3.hcl( "rgb( 211, 96, 21 )" ) ;

// 文字列でHSL値を指定
var hcl = d3.hcl( "hsl( 24, 82%, 45% )" ) ;

// 文字列で16進数を指定
var hcl = d3.hcl( "#d36015" ) ;

// 文字列で16進数を指定 (短縮版)
var hcl = d3.hcl( "#f00" ) ;

// 文字列でカラーネームを指定 (CSSのカラーネーム)
var hcl = d3.hcl( "brown" ) ;

構文

instance = d3.hcl( h || string [, s [, l ] ] )

引数

項目説明
hsl3つの引数を利用して、HCLを指定しする。
string3つの引数ではなく、文字列で色を指定してもよい。その場合は、全てHCL値に変換されて管理される。RGB値(rgba(255,0,0))、HSL値(hsl(120,50%,50%))、Hex(#ff0000、#f00)、またはカラーネーム(red)で色を指定する。

戻り値

項目説明
instanceHCL値のインスタンスが戻り値となる。

ノート

少数？パーセンテージ？
公式サイトのドキュメントでは、CとL値を0〜1で指定するように説明されているが、実際はパーセンテージに相当する0〜100で意図した通りの結果となる。HCL値というのを詳しく理解してないので確認中です。