[原创.数据可视化系列之八]使用等d3进行灰度图转伪彩色
2024-10-13 05:57:18
对灰度图进行彩色化是数据可视化中常见的需求,使用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();
最新文章
- SQLserver 备份和还原 失败
- Flex4 vs Flex3: Repeater vs DataGroup
- yii2.0高级框架配置时打开init.bat秒退的解决方法 (两种方法)
- Map,HashMap
- Linux C 程序 函数,数组,指针,gdb调试器(SEVEN)
- 互联网挣钱info
- Jquery使用tbody编辑功能实现table输入计算功能
- crontab经验
- [转] iOS多线程编程之NSOperation和NSOperationQueue的使用
- Hadoop在Windows下的安装配置
- 【BZOJ3450】【Tyvj1952】Easy 可能DP
- [SinGuLaRiTy] 字节大小
- java实现oracle数据库基本操作
- No Spring WebApplicationInitializer types detected on classpath 问题的一种解决办法
- Ubuntu虚拟机识别不了SD卡的解决办法
- 扩容 swap 分区
- Docker Swarm volume 数据持久化
- python 关于文件的操作
- xtrabackup备份MySQL
- vue父组件数据改变,子组件数据并未发生改变(那是因为你没写监听)附带子组件的写法