d3.js自定义刻度值

Question

i have created a line chart using d3.js but i want to have custom tick values of my x-axis. But i am unable to do so.

 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) { dx = dxsplit("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(dx); })) .nice(); var yScale = d3.scale.linear().range([height, 0]) .domain([0, d3.max(data, function(d) { return dy; })]) .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(ax) - parseDate.parse(bx); }); 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(dx)); }) .y(function(d) { return yScale(dy); }); 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> 

In the above example, data is in the interval of 4 hours. I wish to have tick values look like the tick values in the below image instead of time shown in the x-axis when you run the code.

Answer 1

You can get the hours in the x axis tick by changing the format like this:

var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
  .ticks(5).tickFormat(function(d) {
    var today = new Date();
    var r = today.getFullYear() + "-" + (today.getMonth() +1) + "-" + today.getDate();
    var today = new Date(r);
    var hrs = (d - today)/(1000*60*60);
    if (hrs == 0)
      return "NOW";
    else   
      return hrs;
  }).tickSize(0).outerTickSize(0);

Working example here

Hope this helps!