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