d3.js 折线

// 数据
var data = [
  {date: "2023-01-01", value: 5},
  {date: "2023-01-02", value: 9},
  {date: "2023-01-03", value: 7},
  // ...
];

// 设置 SVG 容器
var svg = d3.select("body")
            .append("svg")
            .attr("width", 500)
            .attr("height", 300);

// 创建折线生成器
var line = d3.line()
             .x(function(d) { return xScale(d.date); })
             .y(function(d) { return yScale(d.value); });

// 创建 x 轴和 y 轴的比例尺
var xScale = d3.scaleTime()
              .domain(d3.extent(data, function(d) { return new Date(d.date); }))
              .range([0, 500]);
var yScale = d3.scaleLinear()
              .domain([0, d3.max(data, function(d) { return d.value; })])
              .range([300, 0]);

// 添加 x 轴和 y 轴
svg.append("g")
   .attr("transform", "translate(0,300)")
   .call(d3.axisBottom(xScale));
svg.append("g")
   .call(d3.axisLeft(yScale));

// 添加折线
svg.append("path")
   .datum(data)
   .attr("fill", "none")
   .attr("stroke", "steelblue")
   .attr("stroke-width", 1.5)
   .attr("d", line);