d3

InterpolateRgb

30 May 2014

開始色
終了色

色の補完を行います

domain[0..1],range[0..1]の間で補完色が生成されます

赤から黄色のとき

color(0.0) = #ff0000

color(0.1) = #ff1a00

color(0.2) = #ff3300

color(0.3) = #ff4d00

color(0.4) = #ff6600

color(0.5) = #ff8000

color(0.6) = #ff9900

color(0.7) = #ffb300

color(0.8) = #ffcc00

color(0.9) = #ffe500

color(1.0) = #ffff00

var color = d3.interpolateRgb(selectedStartColor(),selectedEndColor());
var scale = d3.scale.linear()
                    .domain([0,10]); // 初期値 range([0,1])へ変換
svg01.selectAll("rect")
   .data(color)
   .enter()
   .append("rect")
   .attr("x",25)
   .attr("y", function(d,i){ return 30*i;})
   .attr("height",30)
   .attr("width",150)
   .style("fill", function(d,i){ return color(scale(i));});