D3のカラーオブジェクトに値をhexで返すメソッドを追加する

ver.3まではレンジにカラーを指定した場合、hexで返ってきた。

D3 ver.3

> var colorScale = d3.scaleLinear().domain([0, 100]).range(["#cccccc", "#ff0000"])
> colorScale(20)
<- "#d6a3a3"

ver.4 では、rgb形式の文字列で返ってくる。

D3 ver.4

> var colorScale = d3.scaleLinear().domain([0, 100]).range(["#cccccc", "#ff0000"])
> colorScale(20)
<- "rgb(214, 163, 163)"

どうやら、hexに変換するようなメソッドも無いっぽい。

> var c = colorScale(20)
> d3.color(c).toString()
<- "rgb(214, 163, 163)" 

D3のスケールを他のライブラリと組みわせて使いたい時に、相手のライブラリがhexでのカラー指定しか受け取れない場合があるので、とりあえず、hexに変換するメソッドを追加して対応してみた。

> d3.color.prototype.toHex = function(){ return ["#", this.r.toString(16),  this.g.toString(16), this.b.toString(16) ].join("") ; }
> d3.color(c).toHex()
<- "#d6a3a3"