D3.js 将字符串时间戳转换为小时轴

我试图根据d3中的两个时间戳创建散点图，但我不确定使用d3时间格式方法正确解析时间戳格式中的值并基于24小时周期构建范围的正确方法。到目前为止，我构建了一个函数来循环我的数组，并使用d3方法将字符串转换为d3可读格式，但我似乎知道如何格式化输出，以便将日期格式转换为时间格式。我的问题是d3是否接受时间格式？如何将日期对象转换为时间对象？目前，我有一个y轴，多年来一直显示滴答声

提供的是我的完整代码：

div.tooltip{
位置：绝对位置；
文本对齐：居中；
宽度：100px；
高度：30px；
填充：2px；
字体：12px无衬线；
背景：淡蓝色；
边界：0px；
边界半径：8px；
指针事件：无；
}
风险值数据=[
{
“x”：“23:19:30”，
“y”：“08:07:00”
},
{
“x”：“22:55:30”，
“y”：“06:08:00”
},
{
“x”：“21:14:30”，
“y”：“06:13:30”
},
{
“x”：“21:24:30”，
“y”：“06:04:30”
},
{
“x”：“21:24:00”，
“y”：“06:04:00”
},
{
“x”：“21:28:00”，
“y”：“06:09:00”
},
{
“x”：“23:23:30”，
“y”：“08:20:30”
},
{
“x”：“23:47:00”，
“y”：“08:01:30”
},
{
“x”：“00:03:00”，
“y”：“06:49:30”
},
{
“x”：“21:46:00”，
“y”：“06:21:00”
},
{
“x”：“21:58:00”，
“y”：“06:02:30”
},
{
“x”：“21:33:00”，
“y”：“05:56:00”
},
{
“x”：“22:33:00”，
“y”：“06:15:30”
},
{
“x”：“23:49:00”，
“y”：“07:10:30”
},
{
“x”：“23:46:30”，
“y”：“08:35:30”
},
{
“x”：“23:15:30”，
“y”：“05:59:30”
},
{
“x”：“21:26:00”，
“y”：“06:05:00”
},
{
“x”：“21:26:30”，
“y”：“05:54:00”
},
{
“x”：“21:06:00”，
“y”：“05:53:00”
},
{
“x”：“21:25:00”，
“y”：“05:47:30”
},
{
“x”：“00:29:30”，
“y”：“08:59:30”
},
{
“x”：“01:14:00”，
“y”：“08:09:30”
},
{
“x”：“23:12:30”，
“y”：“06:06:30”
},
{
“x”：“21:26:00”，
“y”：“05:52:30”
},
{
“x”：“21:18:30”，
“y”：“05:47:00”
},
{
“x”：“20:54:30”，
“y”：“07:07:30”
},
{
“x”：“21:36:00”，
“y”：“05:53:30”
},
{
“x”：“00:28:00”，
“y”：“08:00:00”
},
{
“x”：“23:21:30”，
“y”：“07:58:30”
},
{
“x”：“21:34:00”，
“y”：“05:51:00”
},
{
“x”：“21:23:30”，
“y”：“05:58:00”
},
{
“x”：“21:05:30”，
“y”：“05:53:00”
},
{
“x”：“21:33:30”，
“y”：“05:39:30”
},
{
“x”：“23:49:30”，
“y”：“06:50:00”
},
{
“x”：“01:11:00”，
“y”：“08:37:30”
},
{
“x”：“22:34:30”，
“y”：“05:15:00”
},
{
“x”：“22:49:30”，
“y”：“05:55:00”
},
{
“x”：“22:06:30”，
“y”：“06:03:00”
},
{
“x”：“21:32:30”，
“y”：“06:01:00”
},
{
“x”：“21:49:00”，
“y”：“05:39:30”
},
{
“x”：“22:47:30”，
“y”：“08:27:30”
},
{
“x”：“21:26:30”，
“y”：“05:51:00”
},
{
“x”：“21:47:30”，
“y”：“05:51:00”
},
{
“x”：“21:28:00”，
“y”：“05:47:30”
},
{
“x”：“21:32:00”，
“y”：“05:47:30”
},
{
“x”：“21:13:30”，
“y”：“05:46:00”
},
{
“x”：“23:42:30”，
“y”：“06:45:00”
},
{
“x”：“21:33:00”，
“y”：“05:48:00”
},
{
“x”：“21:45:00”，
“y”：“05:51:00”
},
{
“x”：“21:29:30”，
“y”：“06:06:00”
},
{
“x”：“21:16:00”，
“y”：“05:43:00”
},
{
“x”：“21:14:00”，
“y”：“05:46:30”
},
{
“x”：“00:01:30”，
“y”：“07:25:30”
},
{
“x”：“02:24:00”，
“y”：“10:35:30”
},
{
“x”：“22:29:30”，
“y”：“07:04:00”
},
{
“x”：“21:43:30”，
“y”：“05:51:00”
},
{
“x”：“21:31:30”，
“y”：“05:45:00”
},
{
“x”：“22:16:30”，
“y”：“05:50:30”
},
{
“x”：“21:59:00”，
“y”：“05:47:00”
},
{
“x”：“02:55:30”，
“y”：“11:15:30”
},
{
“x”：“02:57:00”，
“y”：“07:23:00”
},
{
“x”：“21:49:30”，
“y”：“06:48:30”
},
{
“x”：“21:31:30”，
“y”：“05:26:30”
}
]
//D3日期分析器
对于（变量i=0；ivar toDate = d3.timeParse("%H:%M:%S")
var data = rawData.map(d => ({
    x: toDate(d.x), 
    y: toDate(d.y),
})).sort((a, b) => d3.descending(a.x, b.x)

var x = d3.scaleTime()
    .domain(d3.extent(data, d => d.x))
    .range([0, width]);