d3使用javascript在折线图中的工具提示位置问题

时间：2016-01-20 12:05:56

标签： javascript d3.js

我有一个带有工具提示的折线图。一切正常，但唯一的问题是在折线图和鼠标光标上显示的工具提示圈不在同一个地方/位置，我无法弄清楚如何解决这个问题。此外，我希望仅当鼠标光标悬停在折线图上时才显示工具提示。

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链接，因为在这里我必须删除大量数据才能使其符合字数限制。

2 个答案:

答案 0 :(得分：3)

基于@cuckovic的解决方案评论：Jsfiddle

＆＃13;
＆＃13; 
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));
}
＆＃13; 
.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;
}
＆＃13; 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

你可以在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]);
}

工作代码here

相关问题
最新问题