d3.js tutorial

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

  • 获取 min, max, [min, max]
    typescript
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    cosnt numbers = [ 5, 4, 10, 1 ];
    const data = [
          { date: '2014-01-01', amount: 10 },
          { date: '2014-02-01', amount: 20 },
          { date: '2014-03-01', amount: 40 },
          { date: '2014-04-01', amount: 80 }
        ];
    d3.min(numbers);
    // 1
    d3.max(data, function(d, i) { return d.amount });
    // 80
    d3.extent(numbers);
    // [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
    1
    2
    3
    export const dateRange = d3.scaleUtc().domain(dateExtent).ticks(d3.utcDay);
    // dateExtent [new Date('2021-01-01'), new Date('2021-01-03')]
    // 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
1
2
3
4
5
6
7
const width = selection.node()?.getTotalLength();;
d3.selection.attr('stroke-dasharray', width)
    .attr('stroke-dashoffset', width) // 向左偏移,隐藏自身
    .transition()
    .duration(2000)
    .ease(d3.easeLinear)
    .attr('stroke-dashoffset', 0) // 动画显示自身

viewBox attribute

js
1
viewBox="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,变态