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

投稿日: / 更新日:

d3.jsのd3.hsl()は、HSL値を操作するためのインスタンスを作成するコンストラクタです。ここで作成したインスタンスを使って、用意された他の様々なメソッドを通してHSL値を加工できます。3つの引数でHSL値を指定するか、または、文字列でRGB、HSL、Hex、カラーネームを指定します。HSL値で指定する場合、第1引数のHは0〜360、SとLはそれぞれ0〜1で指定します。パーセンテージじゃない点にご注意下さい。

サンプルコード

// HSL値のインスタンスを作成 (3つの引数を使ってHSL値を指定)
var hsl = d3.hsl( 24, 0.82, 0.45 ) ;

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

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

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

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

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

構文

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

引数

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

戻り値

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