d3使用javascript在折線圖中的工具提示位置問題

Question

我有一個帶有工具提示的折線圖。 一切正常，但唯一的問題是在折線圖和鼠標光標上顯示的工具提示圈不在同一個地方/位置，我無法弄清楚如何解決這個問題。 此外，我希望僅當鼠標光標懸停在折線圖上時才顯示工具提示。

 var data = [ ["2016-01-19T23:03:55.000Z", 54.0, {}], ["2016-01-19T23:04:25.000Z", 99.8, {}], ["2016-01-19T23:04:55.000Z", 99.8, {}], ["2016-01-19T23:05:25.000Z", 99.4, {}], ["2016-01-19T23:05:55.000Z", 99.8, {}], ["2016-01-19T23:06:25.000Z", 99.8, {}], ["2016-01-19T23:06:55.000Z", 99.8, {}], ["2016-01-19T23:07:25.000Z", 99.8, {}], ["2016-01-19T23:07:55.000Z", 99.8, {}], ["2016-01-19T23:08:25.000Z", 99.8, {}], ["2016-01-19T23:08:55.000Z", 99.8, {}], ["2016-01-19T23:09:25.000Z", 99.7, {}], ["2016-01-19T23:09:55.000Z", 99.8, {}], ["2016-01-19T23:10:25.000Z", 99.7, {}], ["2016-01-19T23:10:55.000Z", 99.8, {}], ["2016-01-19T23:11:25.000Z", 99.7, {}], ["2016-01-19T23:16:25.000Z", 99.6, {}], ["2016-01-19T23:16:56.000Z", 99.8, {}], ["2016-01-19T23:17:26.000Z", 99.8, {}], ["2016-01-19T23:17:56.000Z", 99.8, {}], ["2016-01-19T23:18:26.000Z", 99.8, {}], ["2016-01-19T23:18:56.000Z", 99.8, {}], ["2016-01-19T23:19:26.000Z", 99.7, {}], ["2016-01-19T23:19:56.000Z", 99.8, {}], ["2016-01-19T23:20:26.000Z", 99.7, {}], ["2016-01-19T23:20:56.000Z", 99.8, {}], ["2016-01-19T23:21:26.000Z", 92.3, {}], ["2016-01-19T23:21:56.000Z", 95.0, {}], ["2016-01-19T23:22:40.000Z", 56.0, {}], ["2016-01-19T23:23:10.000Z", 94.9, {}], ["2016-01-19T23:23:40.000Z", 71.8, {}], ["2016-01-19T23:24:10.000Z", 82.0, {}], ["2016-01-19T23:24:40.000Z", 90.8, {}], ["2016-01-19T23:25:31.000Z", 80.6, {}], ["2016-01-19T23:25:58.000Z", 96.0, {}], ["2016-01-19T23:26:28.000Z", 94.3, {}], ["2016-01-19T23:26:58.000Z", 95.2, {}], ["2016-01-19T23:27:28.000Z", 96.0, {}], ["2016-01-19T23:27:58.000Z", 96.3, {}], ["2016-01-19T23:28:28.000Z", 96.2, {}], ["2016-01-19T23:28:58.000Z", 96.2, {}], ["2016-01-19T23:29:28.000Z", 96.0, {}], ["2016-01-19T23:29:58.000Z", 96.1, {}], ["2016-01-19T23:30:28.000Z", 95.9, {}], ["2016-01-19T23:30:58.000Z", 96.0, {}], ["2016-01-19T23:31:28.000Z", 96.0, {}], ["2016-01-19T23:31:58.000Z", 96.3, {}], ["2016-01-19T23:32:28.000Z", 95.3, {}], ["2016-01-19T23:32:58.000Z", 96.1, {}], ["2016-01-19T23:33:28.000Z", 96.0, {}], ["2016-01-19T23:33:58.000Z", 96.3, {}], ["2016-01-19T23:34:28.000Z", 95.9, {}], ["2016-01-19T23:34:58.000Z", 93.5, {}], ["2016-01-19T23:35:28.000Z", 95.2, {}], ["2016-01-19T23:35:58.000Z", 93.7, {}], ["2016-01-19T23:36:19.000Z", 77.2, {}], ["2016-01-19T23:36:49.000Z", 96.0, {}], ["2016-01-19T23:37:19.000Z", 96.0, {}], ["2016-01-19T23:37:57.000Z", 96.2, {}], ["2016-01-19T23:38:19.000Z", 96.0, {}], ["2016-01-19T23:38:49.000Z", 95.9, {}], ["2016-01-19T23:39:33.000Z", 82.7, {}], ["2016-01-19T23:40:12.000Z", 96.1, {}], ["2016-01-19T23:40:33.000Z", 95.8, {}], ["2016-01-19T23:41:03.000Z", 96.1, {}], ["2016-01-19T23:41:33.000Z", 95.9, {}], ["2016-01-19T23:42:03.000Z", 95.9, {}], ["2016-01-19T23:42:33.000Z", 96.0, {}], ["2016-01-19T23:43:03.000Z", 96.0, {}], ["2016-01-19T23:43:33.000Z", 95.8, {}], ["2016-01-19T23:44:03.000Z", 95.8, {}], ["2016-01-19T23:44:33.000Z", 95.9, {}], ["2016-01-19T23:45:03.000Z", 95.9, {}], ["2016-01-19T23:45:33.000Z", 95.9, {}], ["2016-01-19T23:46:03.000Z", 96.0, {}], ["2016-01-19T23:46:33.000Z", 95.9, {}], ["2016-01-19T23:47:03.000Z", 95.8, {}], ["2016-01-19T23:47:33.000Z", 95.8, {}], ["2016-01-19T23:48:03.000Z", 95.9, {}], ["2016-01-19T23:48:33.000Z", 95.9, {}], ["2016-01-19T23:49:03.000Z", 95.8, {}], ["2016-01-19T23:49:33.000Z", 95.7, {}], ["2016-01-19T23:50:03.000Z", 95.0, {}], ["2016-01-19T23:50:33.000Z", 95.8, {}], ["2016-01-19T23:51:04.000Z", 95.8, {}], ["2016-01-19T23:51:33.000Z", 95.8, {}], ["2016-01-19T23:52:03.000Z", 95.9, {}], ["2016-01-19T23:52:34.000Z", 95.9, {}], ["2016-01-19T23:53:03.000Z", 95.7, {}], ["2016-01-19T23:53:33.000Z", 95.9, {}], ["2016-01-19T23:54:04.000Z", 95.8, {}], ["2016-01-19T23:54:34.000Z", 95.8, {}], ["2016-01-19T23:55:04.000Z", 95.8, {}], ["2016-01-19T23:55:34.000Z", 95.8, {}], ["2016-01-19T23:56:04.000Z", 95.0, {}], ["2016-01-19T23:56:34.000Z", 95.7, {}], ["2016-01-19T23:57:04.000Z", 95.6, {}], ["2016-01-19T23:57:34.000Z", 95.8, {}], ["2016-01-19T23:58:04.000Z", 95.7, {}], ["2016-01-19T23:58:34.000Z", 95.8, {}], ["2016-01-19T23:59:04.000Z", 95.8, {}], ["2016-01-19T23:59:34.000Z", 95.8, {}], ["2016-01-20T00:00:04.000Z", 95.7, {}], ["2016-01-20T00:00:34.000Z", 95.8, {}], ["2016-01-20T00:01:04.000Z", 95.5, {}], ["2016-01-20T00:01:34.000Z", 95.6, {}], ["2016-01-20T00:02:04.000Z", 95.6, {}], ["2016-01-20T00:02:34.000Z", 95.8, {}], ["2016-01-20T00:03:04.000Z", 95.6, {}], ["2016-01-20T00:03:34.000Z", 95.8, {}], ["2016-01-20T00:04:04.000Z", 95.7, {}], ["2016-01-20T00:04:34.000Z", 95.8, {}], ["2016-01-20T00:05:04.000Z", 95.6, {}], ["2016-01-20T00:05:34.000Z", 95.6, {}], ["2016-01-20T00:06:04.000Z", 95.5, {}], ["2016-01-20T00:06:34.000Z", 95.8, {}], ["2016-01-20T00:07:04.000Z", 95.6, {}], ["2016-01-20T00:07:34.000Z", 95.9, {}], ["2016-01-20T00:08:04.000Z", 95.6, {}], ["2016-01-20T00:08:34.000Z", 95.7, {}], ["2016-01-20T00:09:04.000Z", 95.6, {}], ["2016-01-20T00:09:34.000Z", 95.7, {}], ["2016-01-20T00:10:04.000Z", 95.6, {}], ["2016-01-20T00:10:34.000Z", 95.8, {}], ["2016-01-20T00:11:04.000Z", 95.6, {}], ["2016-01-20T00:11:34.000Z", 95.9, {}], ["2016-01-20T00:12:04.000Z", 95.6, {}], ["2016-01-20T00:12:34.000Z", 95.8, {}], ["2016-01-20T00:13:04.000Z", 95.7, {}], ["2016-01-20T00:13:34.000Z", 95.7, {}], ["2016-01-20T00:14:04.000Z", 95.5, {}], ["2016-01-20T00:14:34.000Z", 95.8, {}], ["2016-01-20T00:15:04.000Z", 95.7, {}], ["2016-01-20T00:15:34.000Z", 95.7, {}], ["2016-01-20T00:16:04.000Z", 95.5, {}], ["2016-01-20T00:16:34.000Z", 95.7, {}], ["2016-01-20T00:17:04.000Z", 95.6, {}], ["2016-01-20T00:17:34.000Z", 95.7, {}], ["2016-01-20T00:18:05.000Z", 95.9, {}], ["2016-01-20T00:18:35.000Z", 95.5, {}], ["2016-01-20T00:19:05.000Z", 95.8, {}], ["2016-01-20T00:19:35.000Z", 95.9, {}], ["2016-01-20T00:20:05.000Z", 95.8, {}], ["2016-01-20T00:20:35.000Z", 95.7, {}], ["2016-01-20T00:21:05.000Z", 95.8, {}], ["2016-01-20T00:21:35.000Z", 95.7, {}], ["2016-01-20T00:22:05.000Z", 95.8, {}], ["2016-01-20T00:22:35.000Z", 95.7, {}], ["2016-01-20T00:23:05.000Z", 95.7, {}], ["2016-01-20T00:23:35.000Z", 95.6, {}], ["2016-01-20T00:24:05.000Z", 95.7, {}], ["2016-01-20T00:24:35.000Z", 95.8, {}], ["2016-01-20T00:25:05.000Z", 95.8, {}], ["2016-01-20T00:25:35.000Z", 95.7, {}], ["2016-01-20T00:26:05.000Z", 95.7, {}], ["2016-01-20T00:26:35.000Z", 95.8, {}], ["2016-01-20T00:27:05.000Z", 95.8, {}], ["2016-01-20T00:27:35.000Z", 95.7, {}], ["2016-01-20T00:28:05.000Z", 95.8, {}], ["2016-01-20T00:28:35.000Z", 95.7, {}], ["2016-01-20T00:29:05.000Z", 95.8, {}], ["2016-01-20T00:29:35.000Z", 95.8, {}], ["2016-01-20T00:30:05.000Z", 95.7, {}], ["2016-01-20T00:30:35.000Z", 95.7, {}], ["2016-01-20T00:31:05.000Z", 95.8, {}], ["2016-01-20T00:31:35.000Z", 95.8, {}], ["2016-01-20T00:32:05.000Z", 95.8, {}], ["2016-01-20T00:32:35.000Z", 95.7, {}], ["2016-01-20T00:33:05.000Z", 95.8, {}], ["2016-01-20T00:33:35.000Z", 95.8, {}], ["2016-01-20T00:34:05.000Z", 95.3, {}], ["2016-01-20T00:34:35.000Z", 95.6, {}], ["2016-01-20T00:35:05.000Z", 93.8, {}], ["2016-01-20T00:35:35.000Z", 95.4, {}], ["2016-01-20T00:36:05.000Z", 95.6, {}], ["2016-01-20T00:36:35.000Z", 95.2, {}], ["2016-01-20T00:37:05.000Z", 95.4, {}], ["2016-01-20T00:37:35.000Z", 94.7, {}], ["2016-01-20T00:38:05.000Z", 94.9, {}], ["2016-01-20T00:38:36.000Z", 95.2, {}], ["2016-01-20T00:39:05.000Z", 95.0, {}], ["2016-01-20T00:39:35.000Z", 94.8, {}], ["2016-01-20T00:40:06.000Z", 95.8, {}], ["2016-01-20T00:40:36.000Z", 95.0, {}], ["2016-01-20T00:41:06.000Z", 95.7, {}], ["2016-01-20T00:41:36.000Z", 95.4, {}], ["2016-01-20T00:42:06.000Z", 95.1, {}], ["2016-01-20T00:42:36.000Z", 95.4, {}], ["2016-01-20T00:43:06.000Z", 95.4, {}], ["2016-01-20T00:43:36.000Z", 95.6, {}], ["2016-01-20T00:44:06.000Z", 95.7, {}], ["2016-01-20T00:44:36.000Z", 95.6, {}], ["2016-01-20T00:45:06.000Z", 95.4, {}], ["2016-01-20T00:45:36.000Z", 95.5, {}], ["2016-01-20T00:46:06.000Z", 95.9, {}], ["2016-01-20T00:46:36.000Z", 94.6, {}], ["2016-01-20T00:47:06.000Z", 94.9, {}], ["2016-01-20T00:47:36.000Z", 95.7, {}], ["2016-01-20T00:48:06.000Z", 95.9, {}], ["2016-01-20T00:48:36.000Z", 94.8, {}], ["2016-01-20T00:49:06.000Z", 95.7, {}], ["2016-01-20T00:49:36.000Z", 94.7, {}], ["2016-01-20T00:50:06.000Z", 93.7, {}], ["2016-01-20T00:50:36.000Z", 95.2, {}], ["2016-01-20T00:51:06.000Z", 95.7, {}], ["2016-01-20T00:51:36.000Z", 95.7, {}], ["2016-01-20T00:52:06.000Z", 94.9, {}], ["2016-01-20T00:52:36.000Z", 95.5, {}], ["2016-01-20T00:53:06.000Z", 95.6, {}], ["2016-01-20T00:53:36.000Z", 95.7, {}], ["2016-01-20T00:54:06.000Z", 95.9, {}], ["2016-01-20T00:54:36.000Z", 95.6, {}], ["2016-01-20T00:55:06.000Z", 95.7, {}], ["2016-01-20T00:55:36.000Z", 95.8, {}], ["2016-01-20T00:56:06.000Z", 95.6, {}], ["2016-01-20T00:56:36.000Z", 95.7, {}], ["2016-01-20T00:57:06.000Z", 95.7, {}], ["2016-01-20T00:57:36.000Z", 95.0, {}], ["2016-01-20T00:58:06.000Z", 95.6, {}], ["2016-01-20T00:58:36.000Z", 95.6, {}], ["2016-01-20T00:59:06.000Z", 95.5, {}], ["2016-01-20T00:59:36.000Z", 95.8, {}], ["2016-01-20T01:00:06.000Z", 95.3, {}], ["2016-01-20T01:00:37.000Z", 95.6, {}], ["2016-01-20T01:01:06.000Z", 95.3, {}], ["2016-01-20T01:01:36.000Z", 95.8, {}], ["2016-01-20T01:02:07.000Z", 95.6, {}], ["2016-01-20T01:02:37.000Z", 95.8, {}], ["2016-01-20T01:03:06.000Z", 95.7, {}], ["2016-01-20T01:03:37.000Z", 95.9, {}], ["2016-01-20T01:04:07.000Z", 95.8, {}], ["2016-01-20T01:04:37.000Z", 95.9, {}], ["2016-01-20T01:05:07.000Z", 95.7, {}], ["2016-01-20T01:05:37.000Z", 95.1, {}], ["2016-01-20T01:06:07.000Z", 95.6, {}], ["2016-01-20T01:06:37.000Z", 96.0, {}], ["2016-01-20T01:07:07.000Z", 95.7, {}], ["2016-01-20T01:07:37.000Z", 95.8, {}], ["2016-01-20T01:08:07.000Z", 95.6, {}], ["2016-01-20T01:08:37.000Z", 95.5, {}], ["2016-01-20T01:09:07.000Z", 95.6, {}], ["2016-01-20T01:09:37.000Z", 95.8, {}], ["2016-01-20T01:10:07.000Z", 95.7, {}], ["2016-01-20T01:10:37.000Z", 95.8, {}], ["2016-01-20T01:11:07.000Z", 95.6, {}], ["2016-01-20T01:11:37.000Z", 95.8, {}], ["2016-01-20T01:12:07.000Z", 95.6, {}], ["2016-01-20T01:12:37.000Z", 95.9, {}], ["2016-01-20T01:13:07.000Z", 95.6, {}], ["2016-01-20T01:13:37.000Z", 95.8, {}], ["2016-01-20T01:14:07.000Z", 95.6, {}], ["2016-01-20T01:14:37.000Z", 95.8, {}], ["2016-01-20T01:15:07.000Z", 95.6, {}], ["2016-01-20T01:15:37.000Z", 95.8, {}], ["2016-01-20T01:16:07.000Z", 95.7, {}], ["2016-01-20T01:16:37.000Z", 95.9, {}], ["2016-01-20T01:17:07.000Z", 95.7, {}], ["2016-01-20T01:17:37.000Z", 96.0, {}], ["2016-01-20T01:18:07.000Z", 95.8, {}], ["2016-01-20T01:18:38.000Z", 93.7, {}], ["2016-01-20T01:19:07.000Z", 95.6, {}], ["2016-01-20T01:19:37.000Z", 96.0, {}], ["2016-01-20T01:20:07.000Z", 95.8, {}], ["2016-01-20T01:20:37.000Z", 95.9, {}], ["2016-01-20T01:21:07.000Z", 95.9, {}], ["2016-01-20T01:21:37.000Z", 95.6, {}], ["2016-01-20T01:22:07.000Z", 95.9, {}], ["2016-01-20T01:22:37.000Z", 95.7, {}], ["2016-01-20T01:23:07.000Z", 95.9, {}], ["2016-01-20T01:23:38.000Z", 96.0, {}], ["2016-01-20T01:24:08.000Z", 95.9, {}], ["2016-01-20T01:24:37.000Z", 95.9, {}], ["2016-01-20T01:25:08.000Z", 96.0, {}], ["2016-01-20T01:25:38.000Z", 96.0, {}], ["2016-01-20T01:26:08.000Z", 95.8, {}], ["2016-01-20T01:26:38.000Z", 95.9, {}], ["2016-01-20T01:27:08.000Z", 95.9, {}], ["2016-01-20T01:27:38.000Z", 95.9, {}], ["2016-01-20T01:28:08.000Z", 95.9, {}] ], width = 1200, height = 360, margin = { top: 30, right: 20, bottom: 30, left: 50 }; width -= margin.left - margin.right; height -= margin.top - margin.bottom; var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ").parse; var x = d3.time.scale.utc().range([0, width]); var y = d3.scale.linear().range([height, 0]); function hourformatter(val) { var hour = Math.floor((new Date() - val) / (60 * 60 * 1000)); if (hour === 0) { return 'NOW'; } else { return '-' + hour + 'HR'; } }; var xAxis = d3.svg.axis().scale(x) .orient("bottom").ticks(d3.time.hour, 1) .tickFormat(function(d) { return hourformatter(d); }).outerTickSize(0); var yAxis = d3.svg.axis().scale(y) .orient("left").tickSize(-width, 0, 0); //.ticks(0) //.tickFormat(""); var svg = d3.select("body") .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 + ")"); // function for the y grid lines function make_y_axis() { return d3.svg.axis() .scale(y) .orient("left") .ticks(10); } x.domain(d3.extent(data, function(d) { return parseDate(d[0]); })); y.domain([0, d3.max(data, function(d) { return d[1]; })]); data.sort(function(a, b) { return parseDate(a[0]) - parseDate(b[0]); }); // Add the X Axis svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); // Add the Y Axis svg.append("g") .attr("class", "y axis") .call(yAxis); // Define the line var lineGen = d3.svg.line() .x(function(d) { return x(parseDate(d[0])); }) .y(function(d) { return y(d[1]); }) .interpolate("basis"); svg.append('path') .attr("class", "line") .attr('d', lineGen(data)); var focus = svg.append("g") .attr("class", "focus") .style("display", "none"); focus.append("circle") .attr("r", 4.5); focus.append("text") .attr("x", 9) .attr("dy", ".35em"); svg.append("rect") .attr("class", "overlay") .attr("width", width) .attr("height", height) .on("mouseover", function() { focus.style("display", null); }) .on("mouseout", function() { focus.style("display", "none"); }) .on("mousemove", mousemove); var path = svg.select('.line').node(); var totLength = path.getTotalLength(); function mousemove() { var x0 = d3.mouse(this)[0], per = width / x0; point = path.getPointAtLength(totLength / per) y0 = y.invert(point.y); focus.attr("transform", "translate(" + point.x + "," + point.y + ")"); focus.select("text").text(y0); } 

 .x.axis path { display: none; } .line { fill: none; stroke: steelblue; stroke-width: 1.5px; } .overlay { fill: none; pointer-events: all; } .focus circle { fill: none; stroke: steelblue; } .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; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 

請幫我解決這個問題。 的jsfiddle

請看一下Jsfiddle鏈接，因為在這里我必須刪除大量數據才能使其符合字數限制。

Answer 1

解決方案基於@cuckovic評論： Jsfiddle

 var data = [ ["2016-01-19T23:03:55.000Z", 54.0, {}], ["2016-01-19T23:04:25.000Z", 99.8, {}], ["2016-01-19T23:04:55.000Z", 99.8, {}], ["2016-01-19T23:05:25.000Z", 99.4, {}], ["2016-01-19T23:05:55.000Z", 99.8, {}], ["2016-01-19T23:06:25.000Z", 99.8, {}], ["2016-01-19T23:06:55.000Z", 99.8, {}], ["2016-01-19T23:07:25.000Z", 99.8, {}], ["2016-01-19T23:07:55.000Z", 99.8, {}], ["2016-01-19T23:08:25.000Z", 99.8, {}], ["2016-01-19T23:08:55.000Z", 99.8, {}], ["2016-01-19T23:09:25.000Z", 99.7, {}], ["2016-01-19T23:09:55.000Z", 99.8, {}], ["2016-01-19T23:10:25.000Z", 99.7, {}], ["2016-01-19T23:10:55.000Z", 99.8, {}], ["2016-01-19T23:11:25.000Z", 99.7, {}], ["2016-01-19T23:16:25.000Z", 99.6, {}], ["2016-01-19T23:16:56.000Z", 99.8, {}], ["2016-01-19T23:17:26.000Z", 99.8, {}], ["2016-01-19T23:17:56.000Z", 99.8, {}], ["2016-01-19T23:18:26.000Z", 99.8, {}], ["2016-01-19T23:18:56.000Z", 99.8, {}], ["2016-01-19T23:19:26.000Z", 99.7, {}], ["2016-01-19T23:19:56.000Z", 99.8, {}], ["2016-01-19T23:20:26.000Z", 99.7, {}], ["2016-01-19T23:20:56.000Z", 99.8, {}], ["2016-01-19T23:21:26.000Z", 92.3, {}], ["2016-01-19T23:21:56.000Z", 95.0, {}], ["2016-01-19T23:22:40.000Z", 56.0, {}], ["2016-01-19T23:23:10.000Z", 94.9, {}], ["2016-01-19T23:23:40.000Z", 71.8, {}], ["2016-01-19T23:24:10.000Z", 82.0, {}], ["2016-01-19T23:24:40.000Z", 90.8, {}], ["2016-01-19T23:25:31.000Z", 80.6, {}], ["2016-01-19T23:25:58.000Z", 96.0, {}], ["2016-01-19T23:26:28.000Z", 94.3, {}], ["2016-01-19T23:26:58.000Z", 95.2, {}], ["2016-01-19T23:27:28.000Z", 96.0, {}], ["2016-01-19T23:27:58.000Z", 96.3, {}], ["2016-01-19T23:28:28.000Z", 96.2, {}], ["2016-01-19T23:28:58.000Z", 96.2, {}], ["2016-01-19T23:29:28.000Z", 96.0, {}], ["2016-01-19T23:29:58.000Z", 96.1, {}], ["2016-01-19T23:30:28.000Z", 95.9, {}], ["2016-01-19T23:30:58.000Z", 96.0, {}], ["2016-01-19T23:31:28.000Z", 96.0, {}], ["2016-01-19T23:31:58.000Z", 96.3, {}], ["2016-01-19T23:32:28.000Z", 95.3, {}], ["2016-01-19T23:32:58.000Z", 96.1, {}], ["2016-01-19T23:33:28.000Z", 96.0, {}], ["2016-01-19T23:33:58.000Z", 96.3, {}], ["2016-01-19T23:34:28.000Z", 95.9, {}], ["2016-01-19T23:34:58.000Z", 93.5, {}], ["2016-01-19T23:35:28.000Z", 95.2, {}], ["2016-01-19T23:35:58.000Z", 93.7, {}], ["2016-01-19T23:36:19.000Z", 77.2, {}], ["2016-01-19T23:36:49.000Z", 96.0, {}], ["2016-01-19T23:37:19.000Z", 96.0, {}], ["2016-01-19T23:37:57.000Z", 96.2, {}], ["2016-01-19T23:38:19.000Z", 96.0, {}], ["2016-01-19T23:38:49.000Z", 95.9, {}], ["2016-01-19T23:39:33.000Z", 82.7, {}], ["2016-01-19T23:40:12.000Z", 96.1, {}], ["2016-01-19T23:40:33.000Z", 95.8, {}], ["2016-01-19T23:41:03.000Z", 96.1, {}], ["2016-01-19T23:41:33.000Z", 95.9, {}], ["2016-01-19T23:42:03.000Z", 95.9, {}], ["2016-01-19T23:42:33.000Z", 96.0, {}], ["2016-01-19T23:43:03.000Z", 96.0, {}], ["2016-01-19T23:43:33.000Z", 95.8, {}], ["2016-01-19T23:44:03.000Z", 95.8, {}], ["2016-01-19T23:44:33.000Z", 95.9, {}], ["2016-01-19T23:45:03.000Z", 95.9, {}], ["2016-01-19T23:45:33.000Z", 95.9, {}], ["2016-01-19T23:46:03.000Z", 96.0, {}], ["2016-01-19T23:46:33.000Z", 95.9, {}], ["2016-01-19T23:47:03.000Z", 95.8, {}], ["2016-01-19T23:47:33.000Z", 95.8, {}], ["2016-01-19T23:48:03.000Z", 95.9, {}], ["2016-01-19T23:48:33.000Z", 95.9, {}], ["2016-01-19T23:49:03.000Z", 95.8, {}], ["2016-01-19T23:49:33.000Z", 95.7, {}], ["2016-01-19T23:50:03.000Z", 95.0, {}], ["2016-01-19T23:50:33.000Z", 95.8, {}], ["2016-01-19T23:51:04.000Z", 95.8, {}], ["2016-01-19T23:51:33.000Z", 95.8, {}], ["2016-01-19T23:52:03.000Z", 95.9, {}], ["2016-01-19T23:52:34.000Z", 95.9, {}], ["2016-01-19T23:53:03.000Z", 95.7, {}], ["2016-01-19T23:53:33.000Z", 95.9, {}], ["2016-01-19T23:54:04.000Z", 95.8, {}], ["2016-01-19T23:54:34.000Z", 95.8, {}], ["2016-01-19T23:55:04.000Z", 95.8, {}], ["2016-01-19T23:55:34.000Z", 95.8, {}], ["2016-01-19T23:56:04.000Z", 95.0, {}], ["2016-01-19T23:56:34.000Z", 95.7, {}], ["2016-01-19T23:57:04.000Z", 95.6, {}], ["2016-01-19T23:57:34.000Z", 95.8, {}], ["2016-01-19T23:58:04.000Z", 95.7, {}], ["2016-01-19T23:58:34.000Z", 95.8, {}], ["2016-01-19T23:59:04.000Z", 95.8, {}], ["2016-01-19T23:59:34.000Z", 95.8, {}], ["2016-01-20T00:00:04.000Z", 95.7, {}], ["2016-01-20T00:00:34.000Z", 95.8, {}], ["2016-01-20T00:01:04.000Z", 95.5, {}], ["2016-01-20T00:01:34.000Z", 95.6, {}], ["2016-01-20T00:02:04.000Z", 95.6, {}], ["2016-01-20T00:02:34.000Z", 95.8, {}], ["2016-01-20T00:03:04.000Z", 95.6, {}], ["2016-01-20T00:03:34.000Z", 95.8, {}], ["2016-01-20T00:04:04.000Z", 95.7, {}], ["2016-01-20T00:04:34.000Z", 95.8, {}], ["2016-01-20T00:05:04.000Z", 95.6, {}], ["2016-01-20T00:05:34.000Z", 95.6, {}], ["2016-01-20T00:06:04.000Z", 95.5, {}], ["2016-01-20T00:06:34.000Z", 95.8, {}], ["2016-01-20T00:07:04.000Z", 95.6, {}], ["2016-01-20T00:07:34.000Z", 95.9, {}], ["2016-01-20T00:08:04.000Z", 95.6, {}], ["2016-01-20T00:08:34.000Z", 95.7, {}], ["2016-01-20T00:09:04.000Z", 95.6, {}], ["2016-01-20T00:09:34.000Z", 95.7, {}], ["2016-01-20T00:10:04.000Z", 95.6, {}], ["2016-01-20T00:10:34.000Z", 95.8, {}], ["2016-01-20T00:11:04.000Z", 95.6, {}], ["2016-01-20T00:11:34.000Z", 95.9, {}], ["2016-01-20T00:12:04.000Z", 95.6, {}], ["2016-01-20T00:12:34.000Z", 95.8, {}], ["2016-01-20T00:13:04.000Z", 95.7, {}], ["2016-01-20T00:13:34.000Z", 95.7, {}], ["2016-01-20T00:14:04.000Z", 95.5, {}], ["2016-01-20T00:14:34.000Z", 95.8, {}], ["2016-01-20T00:15:04.000Z", 95.7, {}], ["2016-01-20T00:15:34.000Z", 95.7, {}], ["2016-01-20T00:16:04.000Z", 95.5, {}], ["2016-01-20T00:16:34.000Z", 95.7, {}], ["2016-01-20T00:17:04.000Z", 95.6, {}], ["2016-01-20T00:17:34.000Z", 95.7, {}], ["2016-01-20T00:18:05.000Z", 95.9, {}], ["2016-01-20T00:18:35.000Z", 95.5, {}], ["2016-01-20T00:19:05.000Z", 95.8, {}], ["2016-01-20T00:19:35.000Z", 95.9, {}], ["2016-01-20T00:20:05.000Z", 95.8, {}], ["2016-01-20T00:20:35.000Z", 95.7, {}], ["2016-01-20T00:21:05.000Z", 95.8, {}], ["2016-01-20T00:21:35.000Z", 95.7, {}], ["2016-01-20T00:22:05.000Z", 95.8, {}], ["2016-01-20T00:22:35.000Z", 95.7, {}], ["2016-01-20T00:23:05.000Z", 95.7, {}], ["2016-01-20T00:23:35.000Z", 95.6, {}], ["2016-01-20T00:24:05.000Z", 95.7, {}], ["2016-01-20T00:24:35.000Z", 95.8, {}], ["2016-01-20T00:25:05.000Z", 95.8, {}], ["2016-01-20T00:25:35.000Z", 95.7, {}], ["2016-01-20T00:26:05.000Z", 95.7, {}], ["2016-01-20T00:26:35.000Z", 95.8, {}], ["2016-01-20T00:27:05.000Z", 95.8, {}], ["2016-01-20T00:27:35.000Z", 95.7, {}], ["2016-01-20T00:28:05.000Z", 95.8, {}], ["2016-01-20T00:28:35.000Z", 95.7, {}], ["2016-01-20T00:29:05.000Z", 95.8, {}], ["2016-01-20T00:29:35.000Z", 95.8, {}], ["2016-01-20T00:30:05.000Z", 95.7, {}], ["2016-01-20T00:30:35.000Z", 95.7, {}], ["2016-01-20T00:31:05.000Z", 95.8, {}], ["2016-01-20T00:31:35.000Z", 95.8, {}], ["2016-01-20T00:32:05.000Z", 95.8, {}], ["2016-01-20T00:32:35.000Z", 95.7, {}], ["2016-01-20T00:33:05.000Z", 95.8, {}], ["2016-01-20T00:33:35.000Z", 95.8, {}], ["2016-01-20T00:34:05.000Z", 95.3, {}], ["2016-01-20T00:34:35.000Z", 95.6, {}], ["2016-01-20T00:35:05.000Z", 93.8, {}], ["2016-01-20T00:35:35.000Z", 95.4, {}], ["2016-01-20T00:36:05.000Z", 95.6, {}], ["2016-01-20T00:36:35.000Z", 95.2, {}], ["2016-01-20T00:37:05.000Z", 95.4, {}], ["2016-01-20T00:37:35.000Z", 94.7, {}], ["2016-01-20T00:38:05.000Z", 94.9, {}], ["2016-01-20T00:38:36.000Z", 95.2, {}], ["2016-01-20T00:39:05.000Z", 95.0, {}], ["2016-01-20T00:39:35.000Z", 94.8, {}], ["2016-01-20T00:40:06.000Z", 95.8, {}], ["2016-01-20T00:40:36.000Z", 95.0, {}], ["2016-01-20T00:41:06.000Z", 95.7, {}], ["2016-01-20T00:41:36.000Z", 95.4, {}], ["2016-01-20T00:42:06.000Z", 95.1, {}], ["2016-01-20T00:42:36.000Z", 95.4, {}], ["2016-01-20T00:43:06.000Z", 95.4, {}], ["2016-01-20T00:43:36.000Z", 95.6, {}], ["2016-01-20T00:44:06.000Z", 95.7, {}], ["2016-01-20T00:44:36.000Z", 95.6, {}], ["2016-01-20T00:45:06.000Z", 95.4, {}], ["2016-01-20T00:45:36.000Z", 95.5, {}], ["2016-01-20T00:46:06.000Z", 95.9, {}], ["2016-01-20T00:46:36.000Z", 94.6, {}], ["2016-01-20T00:47:06.000Z", 94.9, {}], ["2016-01-20T00:47:36.000Z", 95.7, {}], ["2016-01-20T00:48:06.000Z", 95.9, {}], ["2016-01-20T00:48:36.000Z", 94.8, {}], ["2016-01-20T00:49:06.000Z", 95.7, {}], ["2016-01-20T00:49:36.000Z", 94.7, {}], ["2016-01-20T00:50:06.000Z", 93.7, {}], ["2016-01-20T00:50:36.000Z", 95.2, {}], ["2016-01-20T00:51:06.000Z", 95.7, {}], ["2016-01-20T00:51:36.000Z", 95.7, {}], ["2016-01-20T00:52:06.000Z", 94.9, {}], ["2016-01-20T00:52:36.000Z", 95.5, {}], ["2016-01-20T00:53:06.000Z", 95.6, {}], ["2016-01-20T00:53:36.000Z", 95.7, {}], ["2016-01-20T00:54:06.000Z", 95.9, {}], ["2016-01-20T00:54:36.000Z", 95.6, {}], ["2016-01-20T00:55:06.000Z", 95.7, {}], ["2016-01-20T00:55:36.000Z", 95.8, {}], ["2016-01-20T00:56:06.000Z", 95.6, {}], ["2016-01-20T00:56:36.000Z", 95.7, {}], ["2016-01-20T00:57:06.000Z", 95.7, {}], ["2016-01-20T00:57:36.000Z", 95.0, {}], ["2016-01-20T00:58:06.000Z", 95.6, {}], ["2016-01-20T00:58:36.000Z", 95.6, {}], ["2016-01-20T00:59:06.000Z", 95.5, {}], ["2016-01-20T00:59:36.000Z", 95.8, {}], ["2016-01-20T01:00:06.000Z", 95.3, {}], ["2016-01-20T01:00:37.000Z", 95.6, {}], ["2016-01-20T01:01:06.000Z", 95.3, {}], ["2016-01-20T01:01:36.000Z", 95.8, {}], ["2016-01-20T01:02:07.000Z", 95.6, {}], ["2016-01-20T01:02:37.000Z", 95.8, {}], ["2016-01-20T01:03:06.000Z", 95.7, {}], ["2016-01-20T01:03:37.000Z", 95.9, {}], ["2016-01-20T01:04:07.000Z", 95.8, {}], ["2016-01-20T01:04:37.000Z", 95.9, {}], ["2016-01-20T01:05:07.000Z", 95.7, {}], ["2016-01-20T01:05:37.000Z", 95.1, {}], ["2016-01-20T01:06:07.000Z", 95.6, {}], ["2016-01-20T01:06:37.000Z", 96.0, {}], ["2016-01-20T01:07:07.000Z", 95.7, {}], ["2016-01-20T01:07:37.000Z", 95.8, {}], ["2016-01-20T01:08:07.000Z", 95.6, {}], ["2016-01-20T01:08:37.000Z", 95.5, {}], ["2016-01-20T01:09:07.000Z", 95.6, {}], ["2016-01-20T01:09:37.000Z", 95.8, {}], ["2016-01-20T01:10:07.000Z", 95.7, {}], ["2016-01-20T01:10:37.000Z", 95.8, {}], ["2016-01-20T01:11:07.000Z", 95.6, {}], ["2016-01-20T01:11:37.000Z", 95.8, {}], ["2016-01-20T01:12:07.000Z", 95.6, {}], ["2016-01-20T01:12:37.000Z", 95.9, {}], ["2016-01-20T01:13:07.000Z", 95.6, {}], ["2016-01-20T01:13:37.000Z", 95.8, {}], ["2016-01-20T01:14:07.000Z", 95.6, {}], ["2016-01-20T01:14:37.000Z", 95.8, {}], ["2016-01-20T01:15:07.000Z", 95.6, {}], ["2016-01-20T01:15:37.000Z", 95.8, {}], ["2016-01-20T01:16:07.000Z", 95.7, {}], ["2016-01-20T01:16:37.000Z", 95.9, {}], ["2016-01-20T01:17:07.000Z", 95.7, {}], ["2016-01-20T01:17:37.000Z", 96.0, {}], ["2016-01-20T01:18:07.000Z", 95.8, {}], ["2016-01-20T01:18:38.000Z", 93.7, {}], ["2016-01-20T01:19:07.000Z", 95.6, {}], ["2016-01-20T01:19:37.000Z", 96.0, {}], ["2016-01-20T01:20:07.000Z", 95.8, {}], ["2016-01-20T01:20:37.000Z", 95.9, {}], ["2016-01-20T01:21:07.000Z", 95.9, {}], ["2016-01-20T01:21:37.000Z", 95.6, {}], ["2016-01-20T01:22:07.000Z", 95.9, {}], ["2016-01-20T01:22:37.000Z", 95.7, {}], ["2016-01-20T01:23:07.000Z", 95.9, {}], ["2016-01-20T01:23:38.000Z", 96.0, {}], ["2016-01-20T01:24:08.000Z", 95.9, {}], ["2016-01-20T01:24:37.000Z", 95.9, {}], ["2016-01-20T01:25:08.000Z", 96.0, {}], ["2016-01-20T01:25:38.000Z", 96.0, {}], ["2016-01-20T01:26:08.000Z", 95.8, {}], ["2016-01-20T01:26:38.000Z", 95.9, {}], ["2016-01-20T01:27:08.000Z", 95.9, {}], ["2016-01-20T01:27:38.000Z", 95.9, {}], ["2016-01-20T01:28:08.000Z", 95.9, {}] ], width = 1200, height = 360, margin = { top: 30, right: 20, bottom: 30, left: 50 }; width -= margin.left - margin.right; height -= margin.top - margin.bottom; var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ").parse; var x = d3.time.scale.utc().range([0, width]); var y = d3.scale.linear().range([height, 0]); function hourformatter(val) { var hour = Math.floor((new Date() - val) / (60 * 60 * 1000)); if (hour === 0) { return 'NOW'; } else { return '-' + hour + 'HR'; } }; var xAxis = d3.svg.axis().scale(x) .orient("bottom").ticks(d3.time.hour, 1) .tickFormat(function(d) { return hourformatter(d); }).outerTickSize(0); var yAxis = d3.svg.axis().scale(y) .orient("left").tickSize(-width, 0, 0); //.ticks(0) //.tickFormat(""); var svg = d3.select("body") .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 + ")"); // function for the y grid lines function make_y_axis() { return d3.svg.axis() .scale(y) .orient("left") .ticks(10); } x.domain(d3.extent(data, function(d) { return parseDate(d[0]); })); y.domain([0, d3.max(data, function(d) { return d[1]; })]); data.sort(function(a, b) { return parseDate(a[0]) - parseDate(b[0]); }); // Add the X Axis svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); // Add the Y Axis svg.append("g") .attr("class", "y axis") .call(yAxis); // Define the line var lineGen = d3.svg.line() .x(function(d) { return x(parseDate(d[0])); }) .y(function(d) { return y(d[1]); }) .interpolate("basis"); svg.append('path') .attr("class", "line") .attr('d', lineGen(data)); var focus = svg.append("g") .attr("class", "focus") .style("display", "none"); focus.append("circle") .attr("r", 4.5); focus.append("text") .attr("x", 9) .attr("dy", ".35em"); svg.append("rect") .attr("class", "overlay") .attr("width", width) .attr("height", height) .on("mouseover", function() { focus.style("display", null); }) .on("mouseout", function() { focus.style("display", "none"); }) .on("mousemove", mousemove); var path = svg.select('.line').node(); var totLength = path.getTotalLength(); function mousemove() { var xPos = d3.mouse(this)[0]; var x = xPos; var beginning = x, end = totLength, target, pos; while (true) { target = Math.floor((beginning + end) / 2); pos = path.getPointAtLength(target); if ((target === end || target === beginning) && pos.x !== x) { break; } if (pos.x > x) end = target; else if (pos.x < x) beginning = target; else break; //position found } focus.attr("transform", "translate(" + x + "," + pos.y + ")"); focus.select("text").text((pos.x) + ', ' + y.invert(pos.y)); console.log(y.invert(pos.y)); } 

 .x.axis path { display: none; } .line { fill: none; stroke: steelblue; stroke-width: 1.5px; } .overlay { fill: none; pointer-events: all; } .focus circle { fill: none; stroke: steelblue; } .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; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 

Answer 2

你可以在d3 bisector的幫助下解決同樣的問題。

function mousemove() {

 var x0 = x.invert(d3.mouse(this)[0]);
        i = bisectDate(data, x0, 1);
        d0 = data[i - 1];
        d1 = data[i];


        d = x0 - parseDate(d0[0]) > parseDate(d1[0]) - x0 ? d1 : d0;
   focus.attr("transform", "translate(" + x(parseDate(d[0])) + "," + y(d[1]) + ")");
  focus.select("text").text(d[1]);
}

在這里工作代碼