[原创.数据可视化系列之八]使用等d3进行灰度图转伪彩色

对灰度图进行彩色化是数据可视化中常见的需求，使用d3在客户端比较容易实现，本文使用d3生成图片,并显示：

代码如下：

代码中首先下载数据文件，然后设定d3的色带信息，生成一个空白的canvas元素，并对元素的，通过d3插值颜色，给每个点设定颜色信息，并显示出来：

 d3.request("data/geos/current/" + IdwPro[options.pro].file)
             .responseType("arraybuffer")
             .response(function (req) {
              var values=req;
             console.info(values);

             //色带信息。
             var color = d3.scaleLinear().domain([193, 206, 219, 233.15, 255.372, 273.15, 275.15, 291, 298, 311, 328])
             .range([d3.rgb(37, 4, 42), d3.rgb(41, 10, 130), d3.rgb(81, 40, 40),
                      d3.rgb(192, 37, 149), d3.rgb(70, 215, 215), d3.rgb(21, 84, 187),
                      d3.rgb(24, 132, 14), d3.rgb(247, 251, 59), d3.rgb(235, 167, 21),
                      d3.rgb(230, 71, 39), d3.rgb(88, 27, 67)])
             .interpolate(d3.interpolateHcl);
             //图片高度
             var width = 720,
                 height = 360;

             var _blankcanvas = document.createElement("canvas");
             _blankcanvas.width = width;
             _blankcanvas.height = height;
             var blankcanvas = _blankcanvas.getContext("2d").getImageData(0, 0, width, height);
             var _idwcontext = document.createElement("canvas");
             _idwcontext.width = width;
             _idwcontext.height = height;

             var idwcontext = _idwcontext.getContext("2d");

             var c, i = 0,
                 n = width * height * 4,
                 blankimg = blankcanvas.data;

             var d = new Uint8ClampedArray(n);
             //console.info(image.data);
             for (var i = 0; i < height; i++) {
                 var istar = width * i;
                 var istart = (height - i) * width;
                 for (var j = 0; j < width; j++) {

                     c = d3.rgb(color(values.blocks[0][(istar + j)]));
                     blankimg[(istart + j) * 4 + 0] = c.r;
                     blankimg[(istart + j) * 4 + 1] = c.g;
                     blankimg[(istart + j) * 4 + 2] = c.b;
                     blankimg[(istart + j) * 4 + 3] = 255;
                 }
             }

             idwcontext.putImageData(blankcanvas, 0, 0);
             //

         }).get();