d3.timeParse解析时间字符串返回null 如何转换为D3图表X轴格式

• d3.timeParse() 生成的解析函数仅支持接收单个时间字符串作为入参，直接把整个x_data数组传入函数时，数组会被转成逗号拼接的长字符串，和预设的格式规则完全不匹配，因此直接返回null，无法完成解析。
• 你定义的时间格式规则%Y_%m_%d__%H_%M_%S和原始时间字符串的结构是完全对应的，不需要修改x_data里的字符串内容。

不需要调整原始x_data的字符串结构，只需要逐元素调用解析函数，生成D3可识别的原生Date对象数组即可，参考代码：

// 原始时间字符串数组，格式与解析规则完全匹配，无需改动
var x_data = ["2021_04_27__21_52_09", "2021_04_27__21_52_13", "2021_04_27__21_52_16"]
// 定义时间解析规则，与字符串的下划线分隔结构完全对应
var timeParser = d3.timeParse("%Y_%m_%d__%H_%M_%S");
// 逐元素解析，生成X轴可用的时间对象数组
var x_axis_data = x_data.map(item => timeParser(item))

解析完成后的x_axis_data由标准JS Date对象组成，直接传入d3.scaleTime()创建的时间比例尺，即可作为X轴数据源使用，不需要额外做格式转换。

如果逐元素调用解析函数仍然返回null，可重点核对两个细节：

• 检查原始字符串与解析规则的分隔符数量是否一致，比如日期和时间之间的双下划线__是否和规则中写的下划线数量完全匹配，避免单、双下划线错位导致匹配失败。
• 确认传入解析函数的元素是纯字符串，不是嵌套的数组、对象等其他结构。

内容的提问来源于stack exchange，提问作者Evan Kim