D3.js 时间序列教程：用数据可视化讲述时间的故事 📊

时间序列数据是分析随时间变化的指标的关键。D3.js 提供了强大的工具来创建动态、交互式的图表。以下是实现步骤：

1. 准备数据
   确保数据格式为时间戳与数值对，例如：

   const data = [
     { date: "2023-01-01", value: 120 },
     { date: "2023-01-02", value: 145 },
     // 更多数据点...
   ];
   

   

2. 转换时间格式
   使用 d3.timeParse 将字符串转换为时间对象：

   const parseTime = d3.timeParse("%Y-%m-%d");
   data.forEach(d => d.date = parseTime(d.date));
   

3. 创建时间轴
   用 d3.scaleTime() 定义时间范围，结合 margin 和 svg 元素布局：

   const xScale = d3.scaleTime()
     .domain(d3.extent(data, d => d.date))
     .range([0, width - margin.left - margin.right]);
   

4. 绘制折线图
   通过 d3.line() 生成路径数据，用 path 元素渲染：

   const line = d3.line()
     .x(d => xScale(d.date))
     .y(d => yScale(d.value));
   svg.append("path").datum(data).attr("d", line);
   

5. 添加交互功能
   用 mouseover 和 mouseout 实现数据点悬停效果：

   svg.selectAll("circle")
     .data(data)
     .enter()
     .append("circle")
     .attr("r", 5)
     .on("mouseover", (event, d) => tooltip.show(d));
   

扩展阅读

• D3.js 基础教程：了解核心概念与简单图表
• 数据可视化最佳实践：提升图表可读性技巧

*图示：数据从原始状态到可视化呈现的流程*