hsl.toString - HSL値をHex(16進数)に変換する

<div id="target">#000000</div> <p><a id="method1">hsl( 24, 0.82, 0.45 )</a></p> <p><a id="method2">hsl( 212, 0.62, 0.39 )</a></p> <p><a id="method3">hsl( 4, 0.9, 0.58 )</a></p> <p><a id="method4">hsl( 283, 0.39, 0.53 )</a></p> <p><a id="method5">リセット</a></p>

#target { height: 100px ; line-height: 100px ; background: #000 ; margin: 0 auto ; color: #fff ; text-align: center ; } a { color: #333 ; display: block ; background: #f2f2f2 ; text-align: center ; padding: 8px ; font-weight: 700 ; } a:hover { cursor: pointer ; background: #e6e6e6 ; }

// クリックイベント1 d3.select( "#method1" ).on( "click", function() { // HSL値のインスタンスを作成 var hsl = d3.hsl( 24, 0.82, 0.45 ) ; // HSL値をHex(16進数)に変換した値を取得 var hex = hsl.toString() ; // div要素の背景色とテキストを更新 d3.select( "#target" ).transition().style( "background", hex ).text( hex ).style( "color", textColor( hsl ) ) ; } ) ; // クリックイベント2 d3.select( "#method2" ).on( "click", function() { // HSL値のインスタンスを作成 var hsl = d3.hsl( 212, 0.62, 0.39 ) ; // HSL値をHex(16進数)に変換した値を取得 var hex = hsl.toString() ; // div要素の背景色とテキストを更新 d3.select( "#target" ).transition().style( "background", hex ).text( hex ).style( "color", textColor( hsl ) ) ; } ) ; // クリックイベント3 d3.select( "#method3" ).on( "click", function() { // HSL値のインスタンスを作成 var hsl = d3.hsl( 4, 0.9, 0.58 ) ; // HSL値をHex(16進数)に変換した値を取得 var hex = hsl.toString() ; // div要素の背景色とテキストを更新 d3.select( "#target" ).transition().style( "background", hex ).text( hex ).style( "color", textColor( hsl ) ) ; } ) ; // クリックイベント4 d3.select( "#method4" ).on( "click", function() { // HSL値のインスタンスを作成 var hsl = d3.hsl( 283, 0.39, 0.53 ) ; // HSL値をHex(16進数)に変換した値を取得 var hex = hsl.toString() ; // div要素の背景色とテキストを更新 d3.select( "#target" ).transition().style( "background", hex ).text( hex ).style( "color", textColor( hsl ) ) ; } ) ; // クリックイベント5 d3.select( "#method5" ).on( "click", function() { // div要素の背景色とテキストを更新 d3.select( "#target" ).transition().style( "background", "#000000" ).text( "#000000" ).style( "color", "#fff" ) ; } ) ; // 背景色に応じて文字色を白にするか黒にするか判断 function textColor( hsl ) { rgb = d3.rgb( hsl ) ; return ( rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114 ) > 186 ? "#000" : "#fff" ; }