如何在生成D3柱状图前筛选CSV中的偶数日期数据？

嘿，这个需求很好实现！你只需要在D3读取完CSV数据之后、开始绘制图表之前，用JavaScript的filter()方法对数据数组做一次筛选就可以了。具体要根据你CSV里的日期字段格式来调整，分两种常见情况：

情况1：CSV里的日期是数字格式（比如字段名是day，值为2、4、6...） #

如果你的CSV里直接存的是日期的数字（比如“2”“4”这种），先确保把字符串类型的数字转成数值类型，再筛选偶数：

d3.csv("your-data-file.csv").then(function(rawData) {
  // 先转换数据类型，把日期字段转成数字
  const processedData = rawData.map(item => ({
    ...item,
    day: +item.day // 加号把字符串转成数字，确保能做取余判断
  }));

  // 筛选日期为偶数的数据
  const filteredData = processedData.filter(item => item.day % 2 === 0);

  // 接下来就用filteredData来绘制你的柱状图就行
  // ... 这里放你原来的D3绘图代码（创建比例尺、绘制柱子、坐标轴等）
});

情况2：CSV里的日期是标准字符串格式（比如date字段是“2024-05-02”） #

如果日期是完整的日期字符串，需要先提取日期的“日”部分，再判断是否为偶数。这里推荐用D3的时间解析器来保证跨浏览器的兼容性：

// 先定义日期解析器，匹配你CSV里的日期格式
const parseDate = d3.timeParse("%Y-%m-%d");

d3.csv("your-data-file.csv").then(function(rawData) {
  const processedData = rawData.map(item => {
    const dateObj = parseDate(item.date);
    return {
      ...item,
      date: dateObj,
      dayOfMonth: dateObj.getDate() // 提取当月的日期数字
    };
  });

  // 筛选日为偶数的数据
  const filteredData = processedData.filter(item => item.dayOfMonth % 2 === 0);

  // 用筛选后的数据集绘制图表
  // ... 你的D3绘图代码
});

小提示 #

• 记得把代码里的your-data-file.csv替换成你实际的CSV文件路径，day/date替换成你CSV里对应的日期字段名。
• 如果你的日期格式不是YYYY-MM-DD，调整d3.timeParse()里的格式字符串就行，比如"%m/%d/%Y"对应“05/02/2024”这种格式。

内容的提问来源于stack exchange，提问作者Samyak Jain