D3.js scaleTime()函数介绍

在D3.js中，scaleTime()函数是一个用于时间序列的比例尺函数，可以用于将时间域（如日期）的值映射到连续的范围内。比例尺函数是D3.js中最基本的功能之一，通过它我们可以将数据映射到像素值或者其他一些有意义的映射方式，常用的比例尺还有线性比例尺，对数比例尺等。

语法

d3.scaleTime()

返回值

返回一个新的时间比例尺。

参数

时间比例尺有一些可选参数，下面我们一一介绍。

domain([dates])

domain()方法用于设置时间比例尺的定义域，是比例尺映射的输入值的范围。domain()方法接收一个由两个时间对象组成的数组作为参数：

d3.scaleTime()
  .domain([new Date(2016, 0, 1), new Date(2016, 11, 31)])

从上面的代码中可以看出，domain()方法接收一个包含两个时间对象的数组，分别代表时间范围的起点和终点。

range([values])

range()方法用于设置时间比例尺的值域，也就是比例尺映射的输出范围。range()方法接收一个数组，用于设置时间比例尺的输出值范围：

d3.scaleTime()
  .range([0, 600])

从上面的代码中可以看出，range()方法接收一个包含两个数值的数组，分别代表输出值的起点和终点。

nice()

nice()方法用于优化时间比例尺的定义域，使其从原本的粗略定义变得更加光滑。nice()方法不接受参数：

d3.scaleTime()
  .domain([new Date(2016, 0, 1), new Date(2016, 11, 31)])
  .nice()

从上面的代码中可以看出，nice()方法会根据实际情况优化时间比例尺的定义域。

示例

下面我们通过一个简单的示例来演示如何使用scaleTime()函数：

let dataset = [
  { date: new Date(2016, 0, 1), value: 100 },
  { date: new Date(2016, 1, 1), value: 200 },
  { date: new Date(2016, 2, 1), value: 300 },
  { date: new Date(2016, 3, 1), value: 400 },
  { date: new Date(2016, 4, 1), value: 500 },
  { date: new Date(2016, 5, 1), value: 600 },
  { date: new Date(2016, 6, 1), value: 700 },
  { date: new Date(2016, 7, 1), value: 800 },
  { date: new Date(2016, 8, 1), value: 900 },
  { date: new Date(2016, 9, 1), value: 1000 },
  { date: new Date(2016, 10, 1), value: 1100 },
  { date: new Date(2016, 11, 1), value: 1200 }
]

// 定义时间比例尺
let xScale = d3.scaleTime()
  .domain([new Date(2016, 0, 1), new Date(2016, 11, 31)])
  .range([0, 600])
  .nice()

// 输出时间比例尺的最小值和最大值
console.log(xScale.domain()) // [Sat Jan 02 2016 00:00:00 GMT+0800 (CST), Sat Dec 31 2016 00:00:00 GMT+0800 (CST)]
console.log(xScale.range()) // [0, 600]

// 定义y轴比例尺
let yScale = d3.scaleLinear()
  .domain([0, d3.max(dataset, d => d.value)])
  .range([300, 0])

// 绘制折线图
let line = d3.line()
  .x(d => xScale(d.date))
  .y(d => yScale(d.value))

d3.select('svg')
  .append('path')
  .datum(dataset)
  .attr('d', line)
  .attr('fill', 'none')
  .attr('stroke', 'steelblue')
  .attr('stroke-width', 2)

从上面的代码中可以看出，我们首先定义了一个包含时间和数值的数据集，然后使用scaleTime()函数定义了一个时间比例尺，定义域为2016年的整个12个月，值域为[0,600]，最后根据比例尺绘制了一个具有折线的折线图。

总结

scaleTime()函数是D3.js中用于创建时间比例尺的函数，它可以将时间序列的值映射到连续的范围内。该函数的一些参数包括domain()、range()、nice()等，可以帮助我们进一步优化比例尺的实现效果。