数据可视化——D3.js学习笔记

学习资料

https://github.com/d3/d3/blob/master/API.md 英文API文档
https://github.com/tianxuzhang/d3.v4-API-Translation V4版本中文翻译
https://github.com/d3/d3/wiki/Tutorials 官方教程
https://github.com/AmberAAA/d3 博主的练习DEMO

特此声明这篇学习笔记针对于d3.js的版本号为：5.7.0!!!

加载数据

d3.csv

下载的数据集均为csv格式的数据集

// "," - 指定分隔符，该餐宿胡可以省略
// "test.csv" - 加载数据路径
// callback - 回调函数，用个格式化每行数据
// return Promise
d3.dsv(",", "test.csv", function(d) {
  // 回调函数格式化数据
  return {
    year: new Date(+d.Year, 0, 1), // convert "Year" column to Date
    make: d.Make,
    model: d.Model,
    length: +d.Length // convert "Length" column to number
  };
}).then(function(data) {
  // data及为加载好的数据
  console.log(data);
});

Scales 比例尺

https://github.com/d3/d3-scale 英文官方文档

Continuous scales 连续比例尺

Continuous scales map a continuous, quantitative input domain to a continuous output range. If the range is also numeric, the mapping may be inverted. A continuous scale is not constructed directly; instead, try a linear, power, log, identity, time or sequential color scale.

连续比例尺可以理解与一个从domain到range的映射。可以将domain理解为实际值input，range则为绘图时的实际坐标。连续比例尺包括线性linear，指数power，幂log，时间time，渐变色sequential color。

continuous(value)

Given a value from the domain, returns the corresponding value from the range.
给定一个实际范围domain内的值，将返回一个对应的range范围内的值。

If the given value is outside the domain, and clamping is not enabled, the mapping may be extrapolated such that the returned value is outside the range. For example, to apply a position encoding:
在clamping禁用的情况下，如果给定值超出了domain的范围，则返回值也会超出range的范围

var x = d3.scaleLinear()
    .domain([10, 130])
    .range([0, 960]);

x(20); // 80
x(140); // 1040
x.invert(80) // 20

continuous.invert(value)

通过range反求domain

continuous.domain([domain])

设置比例尺的domain——实际距离，continuous.domain()接受一个数组作为参数。这个数组必须要有两个以上的元素构成。

1. 如果domain接收的数组元素不是数字，将会强行转换为数字。
2. 如果没有传参数，则但会当前比例尺的domain。
3. 多分段时，domain必须按照升序或者降序排列。
4. 如果domain与range的长度不同。超出长度的将会被忽略。

continuous.range([range])

continuous.range([range])同样接收一个数组作为参数，并且数组的长度必须大于等于二。但不同的是range不要求数组的元素为数组。‘’

continuous.rangeRound([range])

尚未理解

continuous.interpolate(interpolate)

尚未理解

continuous.clamp(clamp)

配置是否允许超出实际值。

var x = d3.scaleLinear()
    .domain([10, 130])
    .range([0, 960]);

x.clamp() // false
x(140)   // 1040
x.invert(1040)  // 140
x.clamp(true)
x(140)   // 960
x.invert(1040)   // 130