如何用D3.js批量展示CSV多列花粉浓度时序数据

核心思路 #

不用手动指定列名，加载CSV数据后动态提取所有花粉浓度列，再循环遍历这些列，自动为每类花粉生成对应的折线和图例。

修改后的完整代码示例 #

// 设置SVG画布基础参数
const width = 1200;
const height = 600;
const margin = { top: 20, right: 200, bottom: 50, left: 50 };

// 创建SVG容器
const svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

// 加载CSV数据
d3.csv("你的花粉数据文件路径.csv").then(data => {
  // 解析日期格式（需匹配数据集的日期格式，示例为YYYY-MM-DD）
  const parseDate = d3.timeParse("%Y-%m-%d");
  data.forEach(d => {
    d.date = parseDate(d.datum); // 此处"datum"为数据集日期列名，需替换为实际列名
  });

  // 动态提取所有花粉列：排除日期列
  const pollenColumns = Object.keys(data[0]).filter(key => key !== "datum");

  // 为不同花粉分配区分色
  const colorScale = d3.scaleOrdinal()
    .domain(pollenColumns)
    .range(d3.schemeCategory10);

  // 定义X/Y轴比例尺
  const xScale = d3.scaleTime()
    .domain(d3.extent(data, d => d.date))
    .range([margin.left, width - margin.right]);

  const yScale = d3.scaleLinear()
    .domain([0, d3.max(data, d => d3.max(pollenColumns, col => +d[col]))])
    .range([height - margin.bottom, margin.top]);

  // 添加X轴
  svg.append("g")
    .attr("transform", `translate(0, ${height - margin.bottom})`)
    .call(d3.axisBottom(xScale));

  // 添加Y轴
  svg.append("g")
    .attr("transform", `translate(${margin.left}, 0)`)
    .call(d3.axisLeft(yScale));

  // 添加Y轴标签
  svg.append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", margin.left - 10)
    .attr("x", -height/2)
    .style("text-anchor", "middle")
    .text("花粉浓度");

  // 循环生成每类花粉的折线
  pollenColumns.forEach(pollenCol => {
    svg.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", colorScale(pollenCol))
      .attr("stroke-width", 1.5)
      .attr("d", d3.line()
        .x(d => xScale(d.date))
        .y(d => yScale(+d[pollenCol]))
      );
  });

  // 添加图例
  const legend = svg.append("g")
    .attr("transform", `translate(${width - margin.right + 20}, ${margin.top})`);

  pollenColumns.forEach((pollenCol, index) => {
    const legendRow = legend.append("g")
      .attr("transform", `translate(0, ${index * 25})`);

    legendRow.append("rect")
      .attr("width", 15)
      .attr("height", 15)
      .attr("fill", colorScale(pollenCol));

    legendRow.append("text")
      .attr("x", 20)
      .attr("y", 12)
      .style("font-size", "12px")
      .text(pollenCol);
  });
}).catch(error => {
  console.error("加载数据失败:", error);
});

关键步骤说明 #

• 动态提取列名：通过Object.keys(data[0]).filter(key => key !== "datum")过滤出所有非日期列，需将datum替换为你数据集中实际的日期列名（比如Date）。
• 自动颜色分配：用d3.schemeCategory10配色方案自动为每类花粉分配唯一颜色，无需手动设置。
• 批量生成折线：遍历花粉列数组，为每列单独创建折线路径，动态绑定对应浓度数据。
• 自适应Y轴范围：通过嵌套的d3.max获取所有花粉浓度的最大值，确保Y轴能覆盖全部数据范围。

注意事项 #

1. 日期列名匹配：必须确保代码中d.datum的列名与CSV文件的日期列完全一致。
2. 数据类型转换：所有花粉浓度数据通过+d[pollenCol]转为数字类型，避免D3处理字符串导致渲染错误。
3. 性能优化：如果是超大规模数据（比如30年的日度高频数据），可通过降采样减少数据点，避免折线过于密集。

内容的提问来源于stack exchange，提问作者Crazy chicken