d3.js tutorial

关于 svg 的一些基础知识。一些 d3.js 的基础函数的介绍。

一些 d3.js 自带的基础函数

  • 获取 min, max, [min, max]
    typescript
    1cosnt numbers = [ 5, 4, 10, 1 ];
    2const data = [
    3      { date: '2014-01-01', amount: 10 },
    4      { date: '2014-02-01', amount: 20 },
    5      { date: '2014-03-01', amount: 40 },
    6      { date: '2014-04-01', amount: 80 }
    7    ];
    8d3.min(numbers);
    9// 1
    10d3.max(data, function(d, i) { return d.amount });
    11// 80
    12d3.extent(numbers);
    13// [1, 10]
  • enter - The d3.selection.enter() function in D3.js is used to create the missing elements and return the enter selection. 元素不存在则创建并返回元素, 一般和 selector.data(data).enter().xxx 一起食用。
  • Construct an array of dates between start and end dates. (d3.js)
    typescript
    1export const dateRange = d3.scaleUtc().domain(dateExtent).ticks(d3.utcDay);
    2// dateExtent [new Date('2021-01-01'), new Date('2021-01-03')]
    3// dateRange [date:2021-01-01, date:2021-01-02, date:2021-01-03]

svg 使用指南

stroke-dasharray 和 stroke-dashoffset 属性

  • stroke-dasharray 为一个参数时: 其实是表示虚线长度和每段虚线之间的间距。如:stroke-dasharray = '10' 表示:虚线长10,间距10,然后重复 虚线长10,间距10。

  • 两个参数或者多个参数时:一个表示长度,一个表示间距。如:stroke-dasharray = '10, 5' 表示:虚线长10,间距5,然后重复 虚线长10,间距5。如:stroke-dasharray = '20, 10, 5' 表示:虚线长20,间距10,虚线长5,接着是间距20,虚线10,间距5,之后开始如此循环。

  • stroke-dashoffsetoffset 是偏移的意思,因此这个属性是相对于起始点的偏移。偏移x值为正数时,表示向左移动了x个长度单位,偏移x值为负数时,表示向右移动了x个长度单位。

通过这两个属性可以实现一些动画效果:

typescript
1const width = selection.node()?.getTotalLength();;
2d3.selection.attr('stroke-dasharray', width)
3    .attr('stroke-dashoffset', width) // 向左偏移,隐藏自身
4    .transition()
5    .duration(2000)
6    .ease(d3.easeLinear)
7    .attr('stroke-dashoffset', 0) // 动画显示自身

viewBox attribute

js
1viewBox="x, y, width, height"  // x:左上角横坐标,y:左上角纵坐标,width:宽度,height:高度

相当于把 viewBox 所截取的部分,放大到整个 svg。

preserveAspectRatio attribute

https://www.zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/

preserveAspectRatio 默认应该是 "xMidYmid meet".
前半部分:

含义
xMinviewport和viewBox左边对齐
xMidviewport和viewBox x轴中心对齐
xMaxviewport和viewBox右边对齐
YMinviewport和viewBox上边缘对齐。注意Y是大写。
YMidviewport和viewBox y轴中心点对齐。注意Y是大写。
YMaxviewport和viewBox下边缘对齐。注意Y是大写。

后半部分:

含义
meet保持纵横比缩放viewBox适应viewport,受
slice保持纵横比同时比例小的方向放大填满viewport,攻
none扭曲纵横比以充分适应viewport,变态