时间序列图表简介

D3.js 是一个强大的 JavaScript 库，用于在网页上创建交互式数据可视化。本教程将介绍如何使用 D3.js 创建时间序列图表。

时间序列图表是一种展示数据随时间变化的图表。D3.js 提供了多种创建时间序列图表的方法，包括折线图、柱状图等。

创建折线图

以下是一个简单的折线图示例：

d3.csv("data.csv", function(error, data) {
  if (error) throw error;

  var x = d3.scaleLinear()
      .domain([0, d3.max(data, function(d) { return d.date; })])
      .range([0, 500]);

  var y = d3.scaleLinear()
      .domain([0, d3.max(data, function(d) { return d.value; })])
      .range([500, 0]);

  var line = d3.line()
      .x(function(d) { return x(d.date); })
      .y(function(d) { return y(d.value); });

  var svg = d3.select("svg")
      .append("g")
      .attr("transform", "translate(50,50)");

  svg.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 2)
      .attr("d", line);
});

学习更多

想要深入了解 D3.js 时间序列图表，可以阅读以下教程：