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

投稿日: / 更新日:

d3.jsのd3.lab()は、LAB値を操作するためのインスタンスを作成するコンストラクタです。ここで作成したインスタンスを使って、用意された他の様々なメソッドを通してLAB値を加工できます。3つの引数でHCL値を指定するか、または、文字列でRGB、HSL、Hex、カラーネームを指定します。LAB値で指定する場合、それぞれの引数は0〜100で指定する。

サンプルコード

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

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

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

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

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

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

構文

instance = d3.lab( l || string [, a [, b ] ] )

引数

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

戻り値

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

ノート

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