[原创.数据可视化系列之八]使用等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();