d3.js自定义刻度值

Question

我使用d3.js创建了一个折线图，但我希望我的x轴有自定义刻度值。但我无法这样做。

var data =[{x:"2016-01-14T02:49:55.000Z", y:45.9}, {x:"2016-01-14T02:50:25.000Z", y:46.2}, {x:"2016-01-14T02:50:56.000Z", y:47.1}, {x:"2016-01-14T02:51:25.000Z", y:48.8}, {x:"2016-01-14T02:51:55.000Z", y:49.5}, {x:"2016-01-14T02:52:25.000Z", y:45.2}, {x:"2016-01-14T02:52:55.000Z", y:48.2}, {x:"2016-01-14T02:53:25.000Z", y:45.2}, {x:"2016-01-14T02:53:55.000Z", y:50.3}, {x:"2016-01-14T02:54:26.000Z", y:44.3}, {x:"2016-01-14T02:54:55.000Z", y:50.4}, {x:"2016-01-14T02:55:25.000Z", y:44.2}, {x:"2016-01-14T02:55:55.000Z", y:48.7}, {x:"2016-01-14T02:56:26.000Z", y:45.9}, {x:"2016-01-14T02:56:55.000Z", y:45.8}, {x:"2016-01-14T02:57:25.000Z", y:46.6}, {x:"2016-01-14T02:57:56.000Z", y:43.9}, {x:"2016-01-14T02:58:26.000Z", y:46.4}, {x:"2016-01-14T02:58:56.000Z", y:44.4}, {x:"2016-01-14T02:59:25.000Z", y:47.7}, {x:"2016-01-14T02:59:57.000Z", y:46.6}, {x:"2016-01-14T03:00:26.000Z", y:46.1}, {x:"2016-01-14T03:00:56.000Z", y:45.3}, {x:"2016-01-14T03:01:26.000Z", y:44.8}, {x:"2016-01-14T03:01:56.000Z", y:45.8}, {x:"2016-01-14T03:02:26.000Z", y:44.2}, {x:"2016-01-14T03:02:56.000Z", y:46.7}, {x:"2016-01-14T03:03:26.000Z", y:44.9}, {x:"2016-01-14T03:03:56.000Z", y:47.8}, {x:"2016-01-14T03:04:26.000Z", y:42.5}, {x:"2016-01-14T03:04:56.000Z", y:48.4}, {x:"2016-01-14T03:05:27.000Z", y:43.8}, {x:"2016-01-14T03:05:56.000Z", y:53.2}, {x:"2016-01-14T03:06:27.000Z", y:45.3}, {x:"2016-01-14T03:06:56.000Z", y:49.0}, {x:"2016-01-14T03:07:26.000Z", y:48.6}, {x:"2016-01-14T03:07:56.000Z", y:46.7}, {x:"2016-01-14T03:08:26.000Z", y:48.6}, {x:"2016-01-14T03:08:56.000Z", y:44.5}, {x:"2016-01-14T03:09:26.000Z", y:50.2}, {x:"2016-01-14T03:09:56.000Z", y:45.5}, {x:"2016-01-14T03:10:26.000Z", y:48.9}, {x:"2016-01-14T03:10:56.000Z", y:46.9}, {x:"2016-01-14T03:11:26.000Z", y:49.8}, {x:"2016-01-14T03:11:57.000Z", y:47.5}, {x:"2016-01-14T03:12:26.000Z", y:46.3}, {x:"2016-01-14T03:12:56.000Z", y:48.8}, {x:"2016-01-14T03:13:26.000Z", y:45.4}, {x:"2016-01-14T03:13:56.000Z", y:46.4}, {x:"2016-01-14T03:14:26.000Z", y:45.1}, {x:"2016-01-14T03:14:57.000Z", y:48.6}, {x:"2016-01-14T03:15:26.000Z", y:43.5}, {x:"2016-01-14T03:15:56.000Z", y:48.5}, {x:"2016-01-14T03:16:27.000Z", y:45.4}, {x:"2016-01-14T03:16:56.000Z", y:50.6}, {x:"2016-01-14T03:17:27.000Z", y:49.2}, {x:"2016-01-14T03:17:57.000Z", y:47.0}, {x:"2016-01-14T03:18:26.000Z", y:50.8}, {x:"2016-01-14T03:18:57.000Z", y:46.2}, {x:"2016-01-14T03:19:26.000Z", y:43.3}, {x:"2016-01-14T03:19:56.000Z", y:45.6}, {x:"2016-01-14T03:20:27.000Z", y:48.7}, {x:"2016-01-14T03:20:57.000Z", y:48.0}, {x:"2016-01-14T03:21:27.000Z", y:50.1}, {x:"2016-01-14T03:21:57.000Z", y:47.5}, {x:"2016-01-14T03:22:26.000Z", y:43.8}, {x:"2016-01-14T03:22:57.000Z", y:47.7}, {x:"2016-01-14T03:23:27.000Z", y:42.5}, {x:"2016-01-14T03:23:57.000Z", y:49.3}, {x:"2016-01-14T03:24:27.000Z", y:46.4}, {x:"2016-01-14T03:24:57.000Z", y:50.9}, {x:"2016-01-14T03:25:27.000Z", y:43.8}, {x:"2016-01-14T03:25:57.000Z", y:49.9}, {x:"2016-01-14T03:26:27.000Z", y:45.8}, {x:"2016-01-14T03:26:57.000Z", y:46.7}, {x:"2016-01-14T03:27:28.000Z", y:46.7}, {x:"2016-01-14T03:27:57.000Z", y:47.9}, {x:"2016-01-14T03:28:27.000Z", y:48.2}, {x:"2016-01-14T03:28:57.000Z", y:42.0}, {x:"2016-01-14T03:29:29.000Z", y:48.2}, {x:"2016-01-14T03:29:57.000Z", y:45.1}, {x:"2016-01-14T03:30:27.000Z", y:48.1}, {x:"2016-01-14T03:30:57.000Z", y:41.8}, {x:"2016-01-14T03:31:27.000Z", y:45.0}, {x:"2016-01-14T03:31:57.000Z", y:47.7}, {x:"2016-01-14T03:32:27.000Z", y:49.3}, {x:"2016-01-14T03:32:58.000Z", y:47.6}, {x:"2016-01-14T03:33:27.000Z", y:46.9}, {x:"2016-01-14T03:33:58.000Z", y:49.3}, {x:"2016-01-14T03:34:27.000Z", y:43.7}, {x:"2016-01-14T03:34:57.000Z", y:48.3}, {x:"2016-01-14T03:35:28.000Z", y:42.0}, {x:"2016-01-14T03:35:58.000Z", y:48.0}, {x:"2016-01-14T03:36:28.000Z", y:44.6}, {x:"2016-01-14T03:36:57.000Z", y:48.1}, {x:"2016-01-14T03:37:28.000Z", y:42.9}, {x:"2016-01-14T03:37:57.000Z", y:47.2}, {x:"2016-01-14T03:38:27.000Z", y:48.1}, {x:"2016-01-14T03:38:57.000Z", y:44.2}, {x:"2016-01-14T03:39:28.000Z", y:45.2}, {x:"2016-01-14T03:39:58.000Z", y:44.3}, {x:"2016-01-14T03:40:27.000Z", y:46.4}, {x:"2016-01-14T03:40:57.000Z", y:42.1}, {x:"2016-01-14T03:41:28.000Z", y:47.4}, {x:"2016-01-14T03:41:57.000Z", y:40.7}, {x:"2016-01-14T03:42:27.000Z", y:46.8}, {x:"2016-01-14T03:42:58.000Z", y:39.0}, {x:"2016-01-14T03:43:28.000Z", y:44.3}, {x:"2016-01-14T03:43:58.000Z", y:48.4}, {x:"2016-01-14T03:44:28.000Z", y:36.4}, {x:"2016-01-14T03:44:58.000Z", y:43.5}, {x:"2016-01-14T03:45:28.000Z", y:39.4}, {x:"2016-01-14T03:45:58.000Z", y:43.6}, {x:"2016-01-14T03:46:28.000Z", y:37.7}, {x:"2016-01-14T03:46:58.000Z", y:40.0}, {x:"2016-01-14T03:47:29.000Z", y:37.6}, {x:"2016-01-14T03:47:58.000Z", y:39.5}, {x:"2016-01-14T03:48:28.000Z", y:36.4}, {x:"2016-01-14T03:48:58.000Z", y:35.4}, {x:"2016-01-14T03:49:29.000Z", y:37.5}, {x:"2016-01-14T03:49:58.000Z", y:35.0}, {x:"2016-01-14T03:50:28.000Z", y:38.2}, {x:"2016-01-14T03:50:59.000Z", y:37.1}, {x:"2016-01-14T03:51:28.000Z", y:40.0}, {x:"2016-01-14T03:51:58.000Z", y:37.2}, {x:"2016-01-14T03:52:28.000Z", y:37.5}, {x:"2016-01-14T03:52:59.000Z", y:37.6}, {x:"2016-01-14T03:53:28.000Z", y:35.7}, {x:"2016-01-14T03:53:58.000Z", y:36.7}, {x:"2016-01-14T03:54:28.000Z", y:33.9}, {x:"2016-01-14T03:54:59.000Z", y:38.4}, {x:"2016-01-14T03:55:29.000Z", y:36.5}, {x:"2016-01-14T03:55:58.000Z", y:38.1}, {x:"2016-01-14T03:56:28.000Z", y:35.6}, {x:"2016-01-14T03:56:58.000Z", y:37.3}, {x:"2016-01-14T03:57:28.000Z", y:36.3}, {x:"2016-01-14T03:57:58.000Z", y:37.4}, {x:"2016-01-14T03:58:29.000Z", y:35.2}, {x:"2016-01-14T03:58:58.000Z", y:38.3}, {x:"2016-01-14T03:59:28.000Z", y:40.9}, {x:"2016-01-14T03:59:58.000Z", y:35.9}, {x:"2016-01-14T04:00:28.000Z", y:38.3}, {x:"2016-01-14T04:00:58.000Z", y:36.9}, {x:"2016-01-14T04:01:28.000Z", y:39.3}, {x:"2016-01-14T04:01:59.000Z", y:36.8}, {x:"2016-01-14T04:02:29.000Z", y:38.9}, {x:"2016-01-14T04:02:59.000Z", y:37.5}, {x:"2016-01-14T04:03:28.000Z", y:39.6}, {x:"2016-01-14T04:03:59.000Z", y:40.7}, {x:"2016-01-14T04:04:29.000Z", y:34.1}, {x:"2016-01-14T04:04:59.000Z", y:39.3}, {x:"2016-01-14T04:05:29.000Z", y:36.6}, {x:"2016-01-14T04:05:59.000Z", y:41.4}, {x:"2016-01-14T04:06:29.000Z", y:38.3}, {x:"2016-01-14T04:06:59.000Z", y:40.1}, {x:"2016-01-14T04:07:29.000Z", y:35.7}, {x:"2016-01-14T04:07:59.000Z", y:39.9}, {x:"2016-01-14T04:08:30.000Z", y:39.5}, {x:"2016-01-14T04:08:59.000Z", y:40.2}, {x:"2016-01-14T04:09:29.000Z", y:38.0}, {x:"2016-01-14T04:09:59.000Z", y:38.2}, {x:"2016-01-14T04:10:29.000Z", y:40.4}, {x:"2016-01-14T04:10:59.000Z", y:39.1}, {x:"2016-01-14T04:11:29.000Z", y:39.3}, {x:"2016-01-14T04:11:59.000Z", y:37.5}, {x:"2016-01-14T04:12:30.000Z", y:40.2}, {x:"2016-01-14T04:12:59.000Z", y:38.5}, {x:"2016-01-14T04:13:29.000Z", y:38.9}, {x:"2016-01-14T04:13:59.000Z", y:36.7}, {x:"2016-01-14T04:14:30.000Z", y:33.7}, {x:"2016-01-14T04:15:00.000Z", y:38.3}, {x:"2016-01-14T04:15:30.000Z", y:29.8}, {x:"2016-01-14T04:16:00.000Z", y:30.2}, {x:"2016-01-14T04:16:30.000Z", y:34.2}, {x:"2016-01-14T04:17:00.000Z", y:38.1}, {x:"2016-01-14T04:17:29.000Z", y:34.3}, {x:"2016-01-14T04:18:00.000Z", y:36.3}, {x:"2016-01-14T04:18:31.000Z", y:37.0}, {x:"2016-01-14T04:19:00.000Z", y:39.0}, {x:"2016-01-14T04:19:30.000Z", y:38.9}, {x:"2016-01-14T04:19:59.000Z", y:34.7}, {x:"2016-01-14T04:20:29.000Z", y:33.8}, {x:"2016-01-14T04:20:59.000Z", y:36.5}, {x:"2016-01-14T04:21:30.000Z", y:37.1}, {x:"2016-01-14T04:22:00.000Z", y:33.6}, {x:"2016-01-14T04:22:30.000Z", y:38.5}, {x:"2016-01-14T04:23:00.000Z", y:34.9}, {x:"2016-01-14T04:23:30.000Z", y:21.8}, {x:"2016-01-14T04:23:59.000Z", y:49.5}, {x:"2016-01-14T04:24:30.000Z", y:47.7}, {x:"2016-01-14T04:25:00.000Z", y:55.7}, {x:"2016-01-14T04:25:30.000Z", y:49.5}, {x:"2016-01-14T04:26:00.000Z", y:56.2}, {x:"2016-01-14T04:26:30.000Z", y:49.5}, {x:"2016-01-14T04:27:00.000Z", y:55.2}, {x:"2016-01-14T04:27:30.000Z", y:53.6}, {x:"2016-01-14T04:28:00.000Z", y:56.4}, {x:"2016-01-14T04:28:30.000Z", y:53.6}, {x:"2016-01-14T04:29:00.000Z", y:53.4}, {x:"2016-01-14T04:29:30.000Z", y:56.3}, {x:"2016-01-14T04:30:00.000Z", y:50.7}, {x:"2016-01-14T04:30:30.000Z", y:55.0}, {x:"2016-01-14T04:31:00.000Z", y:55.4}, {x:"2016-01-14T04:31:30.000Z", y:55.3}, {x:"2016-01-14T04:32:00.000Z", y:53.4}, {x:"2016-01-14T04:32:30.000Z", y:54.9}, {x:"2016-01-14T04:33:01.000Z", y:54.9}, {x:"2016-01-14T04:33:30.000Z", y:54.7}, {x:"2016-01-14T04:34:00.000Z", y:56.0}, {x:"2016-01-14T04:34:30.000Z", y:54.9}, {x:"2016-01-14T04:35:00.000Z", y:58.7}, {x:"2016-01-14T04:35:30.000Z", y:53.8}, {x:"2016-01-14T04:36:00.000Z", y:55.1}, {x:"2016-01-14T04:36:30.000Z", y:52.5}, {x:"2016-01-14T04:37:00.000Z", y:55.9}, {x:"2016-01-14T04:37:31.000Z", y:53.9}, {x:"2016-01-14T04:38:00.000Z", y:54.5}, {x:"2016-01-14T04:38:31.000Z", y:55.9}, {x:"2016-01-14T04:39:00.000Z", y:55.5}, {x:"2016-01-14T04:39:30.000Z", y:57.2}, {x:"2016-01-14T04:40:00.000Z", y:52.6}, {x:"2016-01-14T04:40:30.000Z", y:53.1}, {x:"2016-01-14T04:41:01.000Z", y:52.2}, {x:"2016-01-14T04:41:31.000Z", y:56.8}, {x:"2016-01-14T04:42:00.000Z", y:51.8}, {x:"2016-01-14T04:42:30.000Z", y:55.9}, {x:"2016-01-14T04:43:01.000Z", y:54.0}, {x:"2016-01-14T04:43:31.000Z", y:54.6}, {x:"2016-01-14T04:44:01.000Z", y:59.2}, {x:"2016-01-14T04:44:30.000Z", y:50.7}, {x:"2016-01-14T04:45:01.000Z", y:57.6}, {x:"2016-01-14T04:45:31.000Z", y:53.2}, {x:"2016-01-14T04:46:01.000Z", y:57.5}, {x:"2016-01-14T04:46:31.000Z", y:52.9}, {x:"2016-01-14T04:47:01.000Z", y:58.1}, {x:"2016-01-14T04:47:31.000Z", y:55.1}, {x:"2016-01-14T04:48:01.000Z", y:54.8}, {x:"2016-01-14T04:48:31.000Z", y:55.5}, {x:"2016-01-14T04:49:01.000Z", y:53.1}, {x:"2016-01-14T04:49:31.000Z", y:55.5}, {x:"2016-01-14T04:50:01.000Z", y:47.2}, {x:"2016-01-14T04:50:32.000Z", y:54.7}, {x:"2016-01-14T04:51:01.000Z", y:54.3}, {x:"2016-01-14T04:51:31.000Z", y:55.0}, {x:"2016-01-14T04:52:01.000Z", y:53.9}, {x:"2016-01-14T04:52:31.000Z", y:56.0}, {x:"2016-01-14T04:53:03.000Z", y:51.2}, {x:"2016-01-14T04:53:31.000Z", y:51.4}, {x:"2016-01-14T04:54:01.000Z", y:56.7}, {x:"2016-01-14T04:54:32.000Z", y:50.4}, {x:"2016-01-14T04:55:02.000Z", y:55.7}, {x:"2016-01-14T04:55:31.000Z", y:52.8}, {x:"2016-01-14T04:56:01.000Z", y:51.6}, {x:"2016-01-14T04:56:31.000Z", y:52.6}, {x:"2016-01-14T04:57:03.000Z", y:54.5}, {x:"2016-01-14T04:57:32.000Z", y:53.2}, {x:"2016-01-14T04:58:01.000Z", y:50.3}, {x:"2016-01-14T04:58:31.000Z", y:55.7}, {x:"2016-01-14T04:59:01.000Z", y:52.1}, {x:"2016-01-14T04:59:31.000Z", y:56.5}, {x:"2016-01-14T05:00:01.000Z", y:51.4}, {x:"2016-01-14T05:00:32.000Z", y:52.7}, {x:"2016-01-14T05:01:01.000Z", y:52.7}, {x:"2016-01-14T05:01:31.000Z", y:55.2}, {x:"2016-01-14T05:02:03.000Z", y:53.0}, {x:"2016-01-14T05:02:33.000Z", y:52.4}, {x:"2016-01-14T05:03:02.000Z", y:56.0}, {x:"2016-01-14T05:03:31.000Z", y:53.2}, {x:"2016-01-14T05:04:01.000Z", y:52.9}, {x:"2016-01-14T05:04:32.000Z", y:52.4}, {x:"2016-01-14T05:05:02.000Z", y:51.4}, {x:"2016-01-14T05:05:32.000Z", y:46.0}, {x:"2016-01-14T05:06:02.000Z", y:48.1}, {x:"2016-01-14T05:06:32.000Z", y:46.8}, {x:"2016-01-14T05:07:02.000Z", y:48.4}, {x:"2016-01-14T05:07:32.000Z", y:46.1}, {x:"2016-01-14T05:08:02.000Z", y:43.1}, {x:"2016-01-14T05:08:31.000Z", y:48.7}, {x:"2016-01-14T05:09:02.000Z", y:46.1}, {x:"2016-01-14T05:09:32.000Z", y:49.3}, {x:"2016-01-14T05:10:02.000Z", y:44.0}, {x:"2016-01-14T05:10:32.000Z", y:49.9}, {x:"2016-01-14T05:11:02.000Z", y:45.6}, {x:"2016-01-14T05:11:32.000Z", y:47.7}, {x:"2016-01-14T05:12:03.000Z", y:46.1}, {x:"2016-01-14T05:12:32.000Z", y:48.5}, {x:"2016-01-14T05:13:02.000Z", y:47.4}, {x:"2016-01-14T05:13:32.000Z", y:44.6}, {x:"2016-01-14T05:14:02.000Z", y:46.1}, {x:"2016-01-14T05:14:33.000Z", y:46.2}, {x:"2016-01-14T05:15:02.000Z", y:49.7}, {x:"2016-01-14T05:15:32.000Z", y:46.7}, {x:"2016-01-14T05:16:02.000Z", y:48.1}, {x:"2016-01-14T05:16:32.000Z", y:43.1}, {x:"2016-01-14T05:17:02.000Z", y:47.1}, {x:"2016-01-14T05:17:33.000Z", y:46.5}, {x:"2016-01-14T05:18:03.000Z", y:46.3}, {x:"2016-01-14T05:18:32.000Z", y:52.1}, {x:"2016-01-14T05:19:02.000Z", y:45.8}, {x:"2016-01-14T05:19:32.000Z", y:48.7}, {x:"2016-01-14T05:20:03.000Z", y:43.8}, {x:"2016-01-14T05:20:32.000Z", y:48.9}, {x:"2016-01-14T05:21:03.000Z", y:44.5}, {x:"2016-01-14T05:21:33.000Z", y:37.8}, {x:"2016-01-14T05:22:03.000Z", y:49.4}, {x:"2016-01-14T05:22:33.000Z", y:50.3}, {x:"2016-01-14T05:23:03.000Z", y:46.3}, {x:"2016-01-14T05:23:32.000Z", y:39.8}, {x:"2016-01-14T05:24:03.000Z", y:44.8}, {x:"2016-01-14T05:24:32.000Z", y:44.7}, {x:"2016-01-14T05:25:03.000Z", y:47.6}, {x:"2016-01-14T05:25:33.000Z", y:44.1}, {x:"2016-01-14T05:26:03.000Z", y:49.6}, {x:"2016-01-14T05:26:33.000Z", y:45.7}, {x:"2016-01-14T05:27:03.000Z", y:48.5}, {x:"2016-01-14T05:27:33.000Z", y:47.8}, {x:"2016-01-14T05:28:03.000Z", y:44.8}, {x:"2016-01-14T05:28:33.000Z", y:48.5}, {x:"2016-01-14T05:29:03.000Z", y:46.2}, {x:"2016-01-14T05:29:33.000Z", y:48.0}, {x:"2016-01-14T05:30:03.000Z", y:44.4}, {x:"2016-01-14T05:30:33.000Z", y:48.5}, {x:"2016-01-14T05:31:03.000Z", y:46.9}, {x:"2016-01-14T05:31:33.000Z", y:48.5}, {x:"2016-01-14T05:32:03.000Z", y:45.6}, {x:"2016-01-14T05:32:33.000Z", y:48.5}, {x:"2016-01-14T05:33:04.000Z", y:47.7}, {x:"2016-01-14T05:33:33.000Z", y:49.3}, {x:"2016-01-14T05:34:03.000Z", y:49.1}, {x:"2016-01-14T05:34:34.000Z", y:46.2}, {x:"2016-01-14T05:35:03.000Z", y:49.5}, {x:"2016-01-14T05:35:33.000Z", y:44.4}, {x:"2016-01-14T05:36:03.000Z", y:48.6}, {x:"2016-01-14T05:36:34.000Z", y:43.2}, {x:"2016-01-14T05:37:03.000Z", y:50.7}, {x:"2016-01-14T05:37:33.000Z", y:45.9}, {x:"2016-01-14T05:38:03.000Z", y:47.2}, {x:"2016-01-14T05:38:34.000Z", y:47.8}, {x:"2016-01-14T05:39:03.000Z", y:47.7}, {x:"2016-01-14T05:39:33.000Z", y:46.0}, {x:"2016-01-14T05:40:03.000Z", y:46.5}, {x:"2016-01-14T05:40:34.000Z", y:47.8}, {x:"2016-01-14T05:41:04.000Z", y:45.4}, {x:"2016-01-14T05:41:34.000Z", y:48.1}, {x:"2016-01-14T05:42:04.000Z", y:43.2}, {x:"2016-01-14T05:42:34.000Z", y:49.2}, {x:"2016-01-14T05:43:04.000Z", y:46.0}, {x:"2016-01-14T05:43:34.000Z", y:45.8}, {x:"2016-01-14T05:44:04.000Z", y:48.2}, {x:"2016-01-14T05:44:34.000Z", y:44.2}, {x:"2016-01-14T05:45:04.000Z", y:50.2}, {x:"2016-01-14T05:45:34.000Z", y:44.5}, {x:"2016-01-14T05:46:04.000Z", y:48.4}, {x:"2016-01-14T05:46:35.000Z", y:45.2}, {x:"2016-01-14T05:47:04.000Z", y:49.6}, {x:"2016-01-14T05:47:34.000Z", y:42.2}, {x:"2016-01-14T05:48:04.000Z", y:46.2}, {x:"2016-01-14T05:48:35.000Z", y:47.3}, {x:"2016-01-14T05:49:04.000Z", y:46.2}, {x:"2016-01-14T05:49:34.000Z", y:47.4}, {x:"2016-01-14T05:50:04.000Z", y:44.1}, {x:"2016-01-14T05:50:34.000Z", y:50.2}, {x:"2016-01-14T05:51:04.000Z", y:45.3}, {x:"2016-01-14T05:51:34.000Z", y:47.8}, {x:"2016-01-14T05:52:05.000Z", y:44.0}, {x:"2016-01-14T05:52:34.000Z", y:49.8}, {x:"2016-01-14T05:53:05.000Z", y:45.3}, {x:"2016-01-14T05:53:34.000Z", y:45.2}, {x:"2016-01-14T05:54:04.000Z", y:47.1}, {x:"2016-01-14T05:54:34.000Z", y:43.5}, {x:"2016-01-14T05:55:04.000Z", y:46.6}, {x:"2016-01-14T05:55:35.000Z", y:45.6}, {x:"2016-01-14T05:56:04.000Z", y:47.4}, {x:"2016-01-14T05:56:34.000Z", y:43.8}, {x:"2016-01-14T05:57:04.000Z", y:43.7}, {x:"2016-01-14T05:57:35.000Z", y:40.3}, {x:"2016-01-14T05:58:04.000Z", y:47.7}, {x:"2016-01-14T05:58:35.000Z", y:45.8}, {x:"2016-01-14T05:59:05.000Z", y:43.5}, {x:"2016-01-14T05:59:35.000Z", y:48.8}, {x:"2016-01-14T06:00:05.000Z", y:43.4}, {x:"2016-01-14T06:00:35.000Z", y:46.6}, {x:"2016-01-14T06:01:05.000Z", y:39.8}, {x:"2016-01-14T06:01:35.000Z", y:46.4}, {x:"2016-01-14T06:02:04.000Z", y:43.3}, {x:"2016-01-14T06:02:34.000Z", y:42.4}, {x:"2016-01-14T06:03:06.000Z", y:39.9}, {x:"2016-01-14T06:03:34.000Z", y:39.1}, {x:"2016-01-14T06:04:05.000Z", y:41.7}, {x:"2016-01-14T06:04:35.000Z", y:30.8}, {x:"2016-01-14T06:05:05.000Z", y:36.2}, {x:"2016-01-14T06:05:35.000Z", y:35.3}, {x:"2016-01-14T06:06:05.000Z", y:34.7}, {x:"2016-01-14T06:06:35.000Z", y:35.4}, {x:"2016-01-14T06:07:05.000Z", y:38.2}, {x:"2016-01-14T06:07:36.000Z", y:37.4}, {x:"2016-01-14T06:08:05.000Z", y:38.0}, {x:"2016-01-14T06:08:35.000Z", y:38.8}, {x:"2016-01-14T06:09:04.000Z", y:36.5}, {x:"2016-01-14T06:09:36.000Z", y:40.0}, {x:"2016-01-14T06:10:05.000Z", y:34.8}, {x:"2016-01-14T06:10:35.000Z", y:40.1}, {x:"2016-01-14T06:11:05.000Z", y:35.9}, {x:"2016-01-14T06:11:35.000Z", y:39.1}, {x:"2016-01-14T06:12:06.000Z", y:34.9}, {x:"2016-01-14T06:12:35.000Z", y:38.3}, {x:"2016-01-14T06:13:05.000Z", y:37.1}, {x:"2016-01-14T06:13:35.000Z", y:34.9}, {x:"2016-01-14T06:14:06.000Z", y:37.4}, {x:"2016-01-14T06:14:35.000Z", y:38.5}, {x:"2016-01-14T06:15:06.000Z", y:36.1}, {x:"2016-01-14T06:15:35.000Z", y:30.3}, {x:"2016-01-14T06:16:05.000Z", y:36.6}, {x:"2016-01-14T06:16:36.000Z", y:34.6}, {x:"2016-01-14T06:17:06.000Z", y:34.1}, {x:"2016-01-14T06:17:37.000Z", y:37.2}, {x:"2016-01-14T06:18:05.000Z", y:39.4}, {x:"2016-01-14T06:18:35.000Z", y:38.7}, {x:"2016-01-14T06:19:05.000Z", y:33.5}, {x:"2016-01-14T06:19:36.000Z", y:38.7}, {x:"2016-01-14T06:20:06.000Z", y:35.2}, {x:"2016-01-14T06:20:36.000Z", y:38.9}, {x:"2016-01-14T06:21:07.000Z", y:35.0}, {x:"2016-01-14T06:21:36.000Z", y:40.1}, {x:"2016-01-14T06:22:06.000Z", y:35.4}, {x:"2016-01-14T06:22:35.000Z", y:37.7}, {x:"2016-01-14T06:23:05.000Z", y:20.9}, {x:"2016-01-14T06:23:36.000Z", y:43.7}, {x:"2016-01-14T06:24:08.000Z", y:48.2}, {x:"2016-01-14T06:24:36.000Z", y:50.6}, {x:"2016-01-14T06:25:06.000Z", y:53.7}, {x:"2016-01-14T06:25:36.000Z", y:51.7}, {x:"2016-01-14T06:26:06.000Z", y:54.7}, {x:"2016-01-14T06:26:35.000Z", y:51.5}, {x:"2016-01-14T06:27:06.000Z", y:53.6}, {x:"2016-01-14T06:27:36.000Z", y:54.1}, {x:"2016-01-14T06:28:06.000Z", y:52.2}, {x:"2016-01-14T06:28:36.000Z", y:55.3}, {x:"2016-01-14T06:29:06.000Z", y:50.4}, {x:"2016-01-14T06:29:36.000Z", y:55.3}, {x:"2016-01-14T06:30:06.000Z", y:50.2}, {x:"2016-01-14T06:30:36.000Z", y:55.9}, {x:"2016-01-14T06:31:06.000Z", y:47.8}, {x:"2016-01-14T06:31:36.000Z", y:54.4}, {x:"2016-01-14T06:32:07.000Z", y:51.4}, {x:"2016-01-14T06:32:37.000Z", y:55.6}, {x:"2016-01-14T06:33:06.000Z", y:52.9}, {x:"2016-01-14T06:33:36.000Z", y:49.5}, {x:"2016-01-14T06:34:06.000Z", y:57.0}, {x:"2016-01-14T06:34:36.000Z", y:53.3}, {x:"2016-01-14T06:35:06.000Z", y:52.4}, {x:"2016-01-14T06:35:36.000Z", y:48.4}, {x:"2016-01-14T06:36:07.000Z", y:55.1}, {x:"2016-01-14T06:36:37.000Z", y:55.0}, {x:"2016-01-14T06:37:06.000Z", y:51.8}, {x:"2016-01-14T06:37:36.000Z", y:55.3}, {x:"2016-01-14T06:38:06.000Z", y:51.8}, {x:"2016-01-14T06:38:37.000Z", y:55.5}, {x:"2016-01-14T06:39:06.000Z", y:52.6}, {x:"2016-01-14T06:39:37.000Z", y:55.1}, {x:"2016-01-14T06:40:07.000Z", y:52.1}, {x:"2016-01-14T06:40:36.000Z", y:56.3}, {x:"2016-01-14T06:41:09.000Z", y:50.2}, {x:"2016-01-14T06:41:37.000Z", y:56.0}, {x:"2016-01-14T06:42:07.000Z", y:55.0}, {x:"2016-01-14T06:42:36.000Z", y:49.5}, {x:"2016-01-14T06:43:07.000Z", y:56.6}, {x:"2016-01-14T06:43:37.000Z", y:52.2}, {x:"2016-01-14T06:44:07.000Z", y:53.1}, {x:"2016-01-14T06:44:37.000Z", y:50.2}, {x:"2016-01-14T06:45:06.000Z", y:54.9}, {x:"2016-01-14T06:45:37.000Z", y:50.4}, {x:"2016-01-14T06:46:06.000Z", y:54.4}, {x:"2016-01-14T06:46:37.000Z", y:52.8}, {x:"2016-01-14T06:47:07.000Z", y:52.6}, {x:"2016-01-14T06:47:37.000Z", y:52.3}, {x:"2016-01-14T06:48:07.000Z", y:48.4}, {x:"2016-01-14T06:48:37.000Z", y:54.0}, {x:"2016-01-14T06:49:07.000Z", y:52.1}, {x:"2016-01-14T06:49:37.000Z", y:54.1}];

var margin = {
    top: 30,
    right: 20,
    bottom: 35,
    left: 50
  },

  width = 1200 - (margin.left + margin.right),
  height = 360 - 2 * (margin.top + margin.bottom);

data.forEach(function(d) {
  d.x = d.x.split("Z")[0];
});

// Parse the date / time
var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S.%L");
var xScale = d3.time.scale().range([0, width])
  .domain(d3.extent(data, function(d) {
    return parseDate.parse(d.x);
  }))
  .nice();



var yScale = d3.scale.linear().range([height, 0])
  .domain([0, d3.max(data, function(d) {
    return d.y;
  })])
  .nice();

d3.select("#d3-chart")
  .style("width", width + margin.left + margin.right + "px")
  .style("height", height + 2 * (margin.top + margin.bottom) + 100 + "px");

d3.select("#d3-chart").select('.d3_charts').append("p")
  .attr("class", "chart-header")
  .text("D3 Line Chart");

// Adds the div for tooltips
var div = d3.select("#d3-chart").append("div")
  .attr("id", "tooltip")
  .attr("class", "hidden");

div.append("p").append("span").attr("class", "value");
div.append("p").append("span").attr("class", "date");

var svg = d3.select("#d3-chart").select('.d3_charts')
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .attr("class", "bg-color")
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


var xAxis = d3.svg.axis().scale(xScale)
  .orient("bottom")
  .ticks(d3.time.hour, 1)
  .innerTickSize(-height)
  .outerTickSize(0);

var yAxis = d3.svg.axis().scale(yScale)
  .orient("left")
  .ticks(5)
  .tickSize(0)
  .innerTickSize(-width)
  .outerTickSize(0);

data.sort(function(a, b) {
  return parseDate.parse(a.x) - parseDate.parse(b.x);
});

svg.append('g')
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
  .selectAll("text")
  .attr("y", 10)
  .attr("x", 6)

svg.append('g')
  .attr("class", "y axis")
  .call(yAxis)
  .selectAll("text")
  .attr("y", 3)
  .attr("x", -10)

// Define the line
var lineGen = d3.svg.line()
  .interpolate("monotone")
  .x(function(d) {
    return xScale(parseDate.parse(d.x));
  })
  .y(function(d) {
    return yScale(d.y);
  });

svg.append('path')
  .attr("class", "line")
  .style("stroke", "blue")
  .attr('d', lineGen(data));

var focus = svg.append("g")
  .attr("class", "focus")
  .style("display", "none");

text {
  font-size: 40px
}
text.inner-circle {
  font-weight: 400;
  font-size: 12px;
  text-transform: uppercase;
}
text.inner-text {
  font-weight: 400;
  font-size: 36px;
  font-family: 'Metric Regular', 'Metric';
  text-align: center;
  font-style: normal;
  text-transform: uppercase;
}
path {
  stroke: steelblue;
  stroke-width: 2;
  fill: none;
}
.axis path,
.axis line {
  fill: none;
  stroke: grey;
  stroke-width: 2;
  shape-rendering: crispEdges;
}
.grid .tick {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}
.grid path {
  stroke-width: 0;
}
.area {
  fill: lightsteelblue;
}
#tooltip {
  position: absolute;
  width: 100px;
  height: auto;
  padding: 10px;
  background-color: white;
  border: 1px solid black;
  text-align: center;
  pointer-events: none;
}
#tooltip.hidden {
  display: none;
}
#tooltip p {
  margin: 0;
  font-family: sans-serif;
  font-size: 14px;
  line-height: 12px;
  vertical-align: middle;
  .value {
    font-weight: 700;
  }
  .date {
    font-size: 10px;
  }
}
.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
  shape-rendering: crispEdges;
}
.overlay {
  fill: none;
  pointer-events: all;
}
.focus circle {
  fill: none;
  stroke: steelblue;
}
.focus text {
  font: 10px sans-serif;
}
d3-bars {
  margin: 10px;
  padding-top: 20px;
}
svg {
  display: block;
  margin: auto;
}
div.d3_charts,
.charts_top {
  background-color: white;
  /*  padding-top: 45px;*/
}
.chart-header {
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  color: #666666;
  font-family: "Metric-Regular";
  padding-top: 5px;
  margin-bottom: 0px !important;
  margin-right: 20px;
  margin-left: 20px;
}
.default-title-class {
  text-align: left;
}
.lengend-action-header,
.lengend-action-buttons {
  float: left;
  margin-right: 15px;
}
.lengend-action-header {
  margin-left: 10px;
  font-weight: normal;
  font-size: 1.2em;
  Font-Family: Metric-Regular;
  Color: #666666;
}
.d3_charts_footer {
  label {
    font-weight: normal;
    font-size: 1.2em;
    Font-Family: Metric-Regular;
    Color: #666666;
    display: block;
    cursor: pointer;
  }
  [type="radio"] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  [type="radio"] + span:before {
    content: '';
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.25em;
    border-radius: 1em;
    border: 0.35em solid #fff;
    box-shadow: 0 0 0 0.10em #36B18D;
    margin-right: 0.75em;
    transition: 0.5s ease all;
  }
  [type="radio"]:checked + span:before {
    background: #36B18D;
    box-shadow: 0 0 0 0.10em #36B18D;
  }
  [type="radio"]:focus + span::after {
    font-size: 1.2em;
    line-height: 1;
    vertical-align: -0.125em;
  }
  .my-legend {
    margin-top: 5px;
  }
  .my-legend .legend-title {
    text-align: left;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 90%;
  }
  .my-legend .legend-scale ul {
    margin: 0;
    margin-bottom: 5px;
    padding: 0;
    float: left;
    list-style: none;
  }
  .my-legend .legend-scale ul li {
    display: inline-block;
    font-size: 80%;
    list-style: none;
    line-height: 18px;
    vertical-align: text-top;
  }
  .my-legend ul.legend-labels li span {
    display: inline-block;
    height: 16px;
    width: 20px;
    margin-right: 5px;
    margin-left: 10px;
    border: 1px solid #999;
  }
  .my-legend a {
    color: #777;
  }
  .legend-labels li:nth-child(even) {
    margin-right: 15px;
  }
}
svg.bg-color {
  background-color: white;
}
.axis text {
  font: 10px sans-serif;
}
.axis path {
  fill: none;
  stroke: #ccc;
  stroke-width: 1px;
  shape-rendering: crispEdges;
}
.axis line {
  fill: none;
  stroke: #ccc;
  stroke-width: 1px;
}
.x_minor {
  stroke: #cccccc;
  stroke-width: 1px;
}
.y_minor:nth-child(even) {
  stroke: #cccccc;
}
.y_minor:nth-child(odd) {
  stroke: #f6f6f6;
}
.tick text {
  Font-Family: Metric-Regular;
  Font-Size: 12px;
  Color: #666666;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="d3-chart">
  <div class="d3_charts"></div>
</div>

在上面的示例中，数据的间隔为4小时。我希望刻度值看起来像下图中的刻度值，而不是运行代码时x轴上显示的时间。

Answer 1

您可以通过更改格式来获取x轴刻度中的小时数：

 jQuery(document).ready(function ($) {
   $('iframe[src*="youtube.com"]').unwrap('<div class="youtubeWrapper" />').wrap('<div class="youtubeWrapper" />');
   $('iframe[src*="vimeo.com"]').unwrap('<div class="vimeoWrapper" />').wrap('<div class="vimeoWrapper" />');
   $('iframe[src*="coub.com"]').unwrap('<div class="coubWrapper" />').wrap('<div class="coubWrapper" />');});

工作示例here

希望这有帮助！