admin管理员组文章数量:1590156
文章目录
-
- Interaction -- 地图数据可视化
-
- JSON
- 地图数据的表达 -- TopoJson, GeoJson
-
- TopoJson
- GeoJson
- Json数据的读取
- 编程(内含一些可能会遇见的坑)
-
- geoPath
- 数据绑定
- 比例尺(如何让地图平铺整个svg)
- 事件
- D3之外的库
-
- D3-Tip
- demo4-Map 地图数据可视化.html
- 可视化效果(鼠标移到某区域上会高亮,点击某区域会显示名字)
Interaction – 地图数据可视化
JSON
JavaScript Object Notation
-
本质上(从数据格式上)是JS的对象
-
保存后是文本
-
文本与JS的对象是可以对等转换的
这点与csv不同,js 读取 csv 的时候会转化成数组
但是js 读取JSON文件时 ,是什么数据就会读出什么数据
地图数据的表达 – TopoJson, GeoJson
TopoJson
- 本质上是Json
- 处理了GeoJson的数据冗余缺点,节约了存储空间
- 由D3的作者 Mike Bostock 制定
TopoJson数据格式:
GeoJson
- 本质上是Json
- D3.js 的geoPath 使用了GeoJson格式的地图数据
TopoJSON与GeoJSON的转换
let geoJson = topojson.feature(data, data.objects.countries);
Json数据的读取
//与读取csv的函数格式类似
d3.json(filepath).then(function)
编程(内含一些可能会遇见的坑)
geoPath
const projection = d3.geoNaturalEarth1() //geoNaturalEarth1是一种常用的映射方式
const geo = d3.geoPath().projection(projection); // project:定义了数据如何投影到地图上
//geo通常用于设计path的d属性
.join('path').attr('d',geo)
数据绑定
需要注意的是,data绑定的不是geoJSON数据,而是features字段
g.selectAll('path').data(geoJSON.features)
比例尺(如何让地图平铺整个svg)
projection调用函数即可
projection.fitSize([innerWidth,innerHeight], geoJson);
事件
设置三要素: 我要为哪些图元 的 哪些事件 设计什么触发动作
d3.select().on('click',function(){
...})
本文标签: 地图数据jsInteraction
版权声明:本文标题:【D3.js 学习记录】——Interaction 地图数据交互可视化 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1728076185a1144504.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论