D3 二维图表的绘制系列（三十一）热力地图（heatMap.js）

上一篇：平行坐标系折线图

下一篇：可缩放的封闭图

代码结构和初始化画布的Chart对象介绍，请先看这里

本图完整的源码地址：这里

1 图表效果

在这里插入图片描述

2 数据

本文源码中提供了中国地图的GeoJson数据，点击这里下载，如果想获取其他地区的数据，可参考这篇文章

3 关键代码

导入GeoJson格式的地图数据

d3.json('./china.json').then(function(data){
   
   
....

一些简单样式和标题的配置

const config = {
   
   
        margins: {
   
   top: 70, left: 80, bottom: 30, right: 80},
        textColor: 'black',
        title: '中国人口热力图'
    }

定义投影系统，包括中心点，比例以及偏移位置等

/* ----------------------------尺度转换------------------------  */
    const projection = d3.geoMercator()
                            .center([104, 38])
                            .scale(355)
                            .translate([chart.getBodyWidth()/2, chart.getBodyHeight()/2])

首先渲染地图轮廓，这个步骤和之前中国地图那篇文章的步骤相同

/* ----------------------------渲染地图轮廓------------------------  */
    chart.renderMap = function(){
   
   
        const path = d3.geoPath(