D3.js 学习笔记

May 17, 2023 · Di Cui

教材 & 课程

d3官方网站

清华的一个可视化课程会先告诉你每一个代码什么意思，怎么用

Curran Kelleher 数据可视化教程偏实践，跟着敲代码就好了

一个文字版讲解

练习网址：VizHub.com

基础概念

基础

数据读取

d3.csv("path/to/data.csv").then(data=>{ });

d3.extent(array) 同时返回最大值和最小值
d3.scaleLinear() 线性比例尺，连续的，设置定义域和值域
const scale = d3.scalinear.domain[(x,y)].range([x1,yz])
d3.scaleBand() 定义域是离散的，值域是连续的

定义坐标轴

const yAxis = d3.axisLeft(yScale);  //左侧坐标轴
const xAxis = d3.axisBottom(xScale); //底面坐标轴

绘制坐标轴

 const yAxisGroup = g.append("g").call(yAxis);
 const xAxisGroup = g.append("g").call(xAxis);

配置坐标轴

 d3.selectAll("tick text").attr("font-size","2em");

.tick 是D3 对于坐标轴定义的统一class

引入坐标轴

 const margin = { top: 50, right: 40, bottom: 20, left: 180 };
 const innerWidth = width - margin.left - margin.right; //定义margin
 const innerHeight = height - margin.top - margin.bottom; //计算inner 长/宽

data-join

本质将数据和图源进行绑定： e.g：将每个国家的人数绑定到矩形的长度

selection.attr(“name”,(d,i)=>{}) d 为“.data(array)”绑定给每个图元的数据 i 为“.data(array)”绑定给每个图元的顺序

d3 调色盘

const color = d3.scalOrdinal().domain(naiveKeys).range(d3.schemeSet3)

transition 模块
d3.select("#rect").transition().duration(ms).attr(type,value);
动画的同步
动画的继承
d3.select("#rect").transition().attr(type,value).transition().attr(type,value);
path
d: 勾勒方式，即笔画
折线图
d3.line().x(d=>d.x).y(d=>d.y)
饼图
d3.arc().innerRadius().outerRadius()
d3.geoPath
日期的比例尺

地图与地理

geoJson 存储地图

将地形的数据映射到画布上

  let proj = d3.geoNaturalEarth1(); //并不是唯一的投影方式
  projection.fitSize([width,height],data); //需要定义比例尺 fitSize 画布的宽和高
  const path = d3.geoPath().projection(projection);

features 数组

加标签

1、基于数据的中心点

  .attr("transform",d=>`translate(${projection([d.properties.centroid[0],d.properties.centroid[1]])})`)

2、基于

3、交互

基于插值的连续比例尺
d3.scaleSequential().domain([min,max])

地图与地理

d3.js 的事件设置通用语法：selection.on(“eventName”,(event,d)=>{触发动作})

图元.on(事件类型，触发动作)

练习

d3.js 中的相关函数

enter() enter()是用来在绑定数据之后，选择缺少的那部分DOM元素。enter()只是进行选择，并未实际添加所需DOM元素。因此在enter()之后一般都会配合append()来进行DOM元素的实际创建。
exit() exit(),与enter()相反，是用来选择那些与数据相比多出来的DOM元素,我们可以接着用.remove()移除这些元素.
merge() d3.merge()函数用于将两个给定数组合并为一个数组。
filter() 用于把Array的某些元素过滤掉，然后返回剩下的元素.
transition() D3 提供了 4 个方法用于实现图形的过渡，即从状态 A 变为状态 B.
duration() 该 API 的功能为指定过渡的持续时间，单位为毫秒.

后面逐渐听不懂…………？？？

Day5 0521 p13-p17

css中的hover 选择鼠标指针浮动在其上的元素，并设置其样式：

make a map

教材 & 课程

基础概念

基础

地图与地理

地图与地理

练习

Day1 0517 p1-4

Day2-3 0518-0519 p5-10

Day4 0520 p11-p12

Day5 0521 p13-p17