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

青旅半醒 2023-06-15 11:18 6阅读 0赞

**上一篇： [平行坐标系折线图][Link 1]**

**下一篇： [可缩放的封闭图][Link 2]**

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

**本图完整的源码地址： [这里][Link 4]**

# 1 图表效果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70]

# 2 数据 #

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

# 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])

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

/* ----------------------------渲染地图轮廓------------------------ */
        chart.renderMap = function(){ 
            const path = d3.geoPath()
                            .projection(projection);
    
            let map = chart.body().selectAll('path')
                                    .data(data.features);
    
                map.enter()
                     .append('path')
                     .attr('class', (d) => 'provinces ' + d.properties.name)
                   .merge(map)
                     .attr('d', path)
                     .attr('stroke', 'white')
                     .attr('stroke-width', 1)
                     .attr('fill', 'gray');
    
                map.exit()
                    .remove();
        }

**接着就是渲染各省市中心的热力点，本文运用`heatMap.js`绘制热力点，并覆盖`canvas`在`svg`之上，这样就达到了效果，值得注意的是，`heatMap.js`的点坐标貌似必须为整数，不然渲染不出来。`heatMap.js`相关API和配置项可以参考[官网][Link 7]**

/* ----------------------------渲染省市中心点------------------------ */
        chart.renderCenter = function(){ 
            const heatMap = h337.create({ 
                container: chart.box().node(),
                maxOpacity: 0.9,
                minOpacity: 0.1,
                blur: 0.9,
                radius: 15,
                gradient: { 
                  '.1': 'gray',
                  '.3': 'blue',
                  '.5': 'green',
                  '.7': 'yellow',
                  '.9': 'red'
                }
            });
    
            const points = data.features.map((d) => ({ 
                x: Math.round(projection(d.properties.center)[0] + config.margins.left),
                y: Math.round(projection(d.properties.center)[1] + config.margins.top),
                value: d.properties.density
            }));
    
            heatMap.setData({ 
                max: 100,
                min: 0,
                data: points
            });
        }

**最后就是绑定鼠标交互事件，悬停鼠标在省上时，省的边界变粗，且显示省的名字。值得注意的是，由于`svg`上面还有一层`canvas`，如果不做处理，那么鼠标事件无法被`svg`元素捕获，在这里给`canvas`画布添加`css`属性`pointer-events: none`，这样就正常了**

/* ----------------------------绑定鼠标交互事件------------------------ */
        chart.addMouseOn = function(){ 
            //防抖函数
            function debounce(fn, time){ 
                let timeId = null;
                return function(){ 
                    const context = this;
                    const event = d3.event;
                    timeId && clearTimeout(timeId)
                    timeId = setTimeout(function(){ 
                        d3.event = event;
                        fn.apply(context, arguments);
                    }, time);
                }
            }
    
            d3.selectAll('.provinces')
                .on('mouseover', function(d){ 
                    const e = d3.event;
                    const position = d3.mouse(chart.svg().node());
    
                    d3.select(e.target)
                        .attr('stroke-width', 2);
    
                    chart.svg()
                        .append('text')
                        .classed('tip', true)
                        .attr('x', position[0]+5)
                        .attr('y', position[1])
                        .attr('fill', config.textColor)
                        .text(d.properties.name);
                })
                .on('mouseleave', function(d,i){ 
                    const e = d3.event;
    
                    d3.select(e.target)
                        .attr('stroke-width', 1);
    
                    d3.select('.tip').remove();
                })
                .on('mousemove', debounce(function(){ 
                        const position = d3.mouse(chart.svg().node());
                        d3.select('.tip')
                        .attr('x', position[0]+5)
                        .attr('y', position[1]-5);
                    }, 6)
                );
        }

# 大功告成！！！ #

--------------------

如果觉得这篇文章帮助了您，请打赏一个小红包鼓励作者继续创作哦！！！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70_pic_center]

[Link 1]: https://blog.csdn.net/zjw_python/article/details/102802154
[Link 2]: https://blog.csdn.net/zjw_python/article/details/105951661
[Link 3]: https://blog.csdn.net/zjw_python/article/details/98182540
[Link 4]: https://github.com/zjw666/D3_demo/tree/master/src/heatMap/chinaMap
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191122111959944.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24=,size_16,color_FFFFFF,t_70
[Link 5]: https://github.com/zjw666/D3_demo/blob/master/src/heatMap/chinaMap/china.json
[Link 6]: https://blog.csdn.net/zjw_python/article/details/98847312
[Link 7]: https://www.patrick-wied.at/static/heatmapjs/docs.html#h337-create
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200406161348198.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24=,size_16,color_FFFFFF,t_70#pic_center