admin管理员组

文章数量:1589967

文章目录

    • 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://m.elefans.com/xitong/1728076185a1144504.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。