d3.js tutorial

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

• 获取 min, max, [min, max]
  typescript

  Copy Code

  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

  Copy Code

  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]

• 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-dashoffset：offset 是偏移的意思，因此这个属性是相对于起始点的偏移。偏移x值为正数时，表示向左移动了x个长度单位，偏移x值为负数时，表示向右移动了x个长度单位。

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

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) // 动画显示自身

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

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

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

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

后半部分：