3
我有一个工具提示实现的折线图。一切工作正常，但唯一的问题是，在折线图和鼠标光标上显示的工具提示圈不在相同的位置/位置，我无法弄清楚如何解决此问题。此外，我希望工具提示只有在鼠标光标悬停在折线图上时才会显示。d3使用javascript的折线图中的工具提示位置问题
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链接，因为在这里我不得不删除大量的数据，以适应它的字数限制。基于@cuckovic评论
下面是类似的问题：http://stackoverflow.com/questions/20562909/d3-jsvertical-moving-lines-intersection-point-with-line-graph/20569292# 20569292和这里是工作示例：http://jsfiddle.net/cuckovic/vKe67/ – cuckovic
不那么流畅，但这是我对您可能想要的mousemove功能的削减。 https://jsfiddle.net/ermineia/fbm64hu4/2/ –
@cuckovic：谢谢你的网址，这有助于 – nikunj2512