数据可视化【十四】交互式过滤地区分布图

在前面的博客中已经介绍了如何绘制地区分布图，这一节学习如何绘制交互式过滤地区分布图。如果对绘制地区分布图还不熟悉的话可以了解一下之前我写的博客：数据可视化【十三】地区分布图

整体的框架仍然是在之前的基础上进行修改，主要是添加交互事件。

首先要做的是给图例添加点击事件，让我们可以通过点击改变地图的状态。
colorLegend.js

 const groupEnter = groups.enter().append('g').attr('class', 'tick').attr('transform', (d,i) => `translate(0, ${i*spacing+circleRadius})`).merge(groups).attr('opacity', d => typeof(selected) === 'undefined' || d === selected ? 1 : 0.2).on('click',onClick)

然后通过onClick函数获得点击的状态，进行相应的修改
index.js

const onClick = d => {console.log(d);selected = d === selected ? undefined : d;if (selected)bg.attr('opacity', 0.5)else bg.attr('opacity', 1)render();
}

上面的bg是背景的海洋，如果确定是点击状态的话就将其设置为透明的，并记录当前的状态，然后进行操作。这里把对地图的操作都放到了render函数里面

把图例的绘制和地图的绘制分别放在对应的函数里，我这里是按照视频分别放在了choroplethMap函数和colorLegend函数，然后再进行调用。

然后再根据不同的更新模式（update、enter）修改地图的状态（通过设置属性就可以）

const projection = geoEqualEarth();
const pathGenerator = geoPath().projection(projection);export const choroplethMap = (selection, props) => {const {features,svg,colorScale,colorValue,selected} = props;console.log('choroplethMap.js');console.log(features);
svg.call(zoom().on('zoom',() => {selection.attr('transform',event.transform);}));const pathUpdate = selection.selectAll('.country').data(features);const pathEnter = pathUpdate.enter().append('path').attr('class', 'country').attr('fill', d => colorScale(colorValue(d))).attr('d', pathGenerator).attr('stroke-width', 0.05)pathEnter.merge(pathUpdate).attr('opacity',d => !selected || colorValue(d) == selected ? 1: 0.1).attr('stroke-width', d => selected && colorValue(d) == selected ? 1: 0.05);pathEnter.append('title')//添加title，然后鼠标放在上面就可以出现标题.text(d => d.properties.name + ':' + colorValue(d))
}

上面的代码和视频中讲解的出入比较多，我个人觉得curran讲这个视频的时候对更新模式的理解有一些偏颇，因此他视频里面的逻辑稍微有点混乱，他的想法是每次点击都重新进行绘制，可是这完全是不必要的，我们需要对点击后的操作在update.merge(enter)里面进行就可以了，不用动初始化的部分。

代码地址：https://vizhub.com/Edward-Elric233/157b7264849e4dc19365b445d949b775?edit=files&file=choroplethMap.js

效果图

这个是可以进行交互的，我把代码放在了自己的服务器上，如果有兴趣可以访问：传送门
需要注意的是尽量使用火狐或者谷歌浏览器访问，文件稍微有点大，加载可能需要一些时间。

数据可视化【十四】交互式过滤地区分布图相关推荐

大数据可视化python_大数据分析之Python数据可视化的四种简易方法
本篇文章探讨了大数据分析之Python数据可视化的四种简易方法,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. < 数据可视化是任何数据科学或机器学习项目的一个重要组成部分 ...
python 财务分析可视化方法_Python数据可视化的四种简易方法
Python数据可视化的四种简易方法作者:PHPYuan 时间:2018-11-28 03:40:43 摘要: 本文讲述了热图.二维密度图.蜘蛛图.树形图这四种Python数据可视化方法. 数据可视 ...
使用ArchR分析单细胞ATAC-seq数据(第十四章)
本文首发于我的个人博客, http://xuzhougeng.top/ 往期回顾: 使用ArchR分析单细胞ATAC-seq数据(第一章) 使用ArchR分析单细胞ATAC-seq数据(第二章) 使用 ...
数据图表可视化_数据可视化十大最有用的图表
数据图表可视化分析师每天使用的最佳数据可视化图表列表. (List of best data visualization charts that Analysts use on a daily ba ...
python数据可视化第四章图标样式的美化
一.图标样式的概述 matplotlib在绘图的过程中会读取储存在本地的的配置文件matplotlibrc,通过matplotlibrc文件中的缺省配置信息指定图表元素的默认样式,完成图表元素的初始设 ...
python做前端可视化_Python数据可视化的四种简易方法
摘要: 本文讲述了热图.二维密度图.蜘蛛图.树形图这四种Python数据可视化方法. 数据可视化是任何数据科学或机器学习项目的一个重要组成部分.人们常常会从探索数据分析(EDA)开始,来深入了解数据, ...
Python数据可视化的四种简易方法
2019独角兽企业重金招聘Python工程师标准>>> 摘要: 本文讲述了热图.二维密度图.蜘蛛图.树形图这四种Python数据可视化方法. 数据可视化是任何数据科学或机器学习项目的 ...
Python数据可视化的四种简易方法 1
摘要: 本文讲述了热图.二维密度图.蜘蛛图.树形图这四种Python数据可视化方法. 数据可视化是任何数据科学或机器学习项目的一个重要组成部分.人们常常会从探索数据分析(EDA)开始,来深入了解数据, ...
数据可视化（四）：如何选择图表（区间型、关系型和地理型数据图表）——学习笔记
这一篇是阐述如何选择可视化图表的最后一部分,主要是以下几类数据的可视化: 区间型数据:区间型数据一般是用来显示数据当前的进度情况,数据格式一般为数值或者百分比: 关系型数据:数据之间有包含关系.层级关 ...

数据可视化【十四】交互式过滤地区分布图

数据可视化【十四】交互式过滤地区分布图相关推荐

最新文章

热门文章