两个怪异。首先注意垂直鼠标线。注意悬停线在绿线。数据条目72.3 ....在该日期不正确。它是x轴上接近0的正确值。文本数据基本上与timeScale()相反。绿线正确绘制。
第二,为什么绿线会产生阴影?悬停线的代码如下:
var enableMouseOver = function () {
mouseG = chart.append("svg:g")
.attr("class", "mouse-over-effects");
//Vertical line from height to y0
mouseG.append("path")
.attr("class", containerId + "-mouse-line")
.style("stroke", "black")
.style("stroke-width", "1px")
.style("opacity", "0");
lines = document.getElementsByClassName(containerId + "-line");
mousePerLine = mouseG.selectAll('.' + containerId + '-mouse-per-line')
.data(dataset)
.enter()
.append("g")
.attr("class", containerId + '-mouse-per-line');
/*
mousePerLine.append("circle")
.attr("r", 7)
.style("stroke", "black")
.style("fill", "none")
.style("opacity", "0");
*/
mousePerLine.append("text")
.attr("transform", "translate(10,3)");
mouseG.append("svg:rect")
.attr('width', width)
.attr('height', height)
.attr('fill', 'none')
.attr('pointer-events', 'all')
.on("mouseout", function () {
d3.select("." + containerId + "-mouse-line")
.style("opacity", "0");
//d3.selectAll("." + containerId + "-mouse-per-line circle")
// .style("opacity", "0");
d3.selectAll("." + containerId + "-mouse-per-line text")
.style("opacity", "0");
})
.on("mouseover", function () {
d3.select("." + containerId + "-mouse-line")
.style("opacity", "1");
//d3.selectAll("." + containerId + "-mouse-per-line circle")
// .style("opacity", "1");
d3.selectAll("." + containerId + "-mouse-per-line text")
.style("opacity", "1");
})
.on("mousemove", function () {
var mouse = d3.mouse(this);
d3.select("." + containerId + "-mouse-line")
.attr("d", function () {
var d = "M" + mouse[0] + "," + height;
d += " " + mouse[0] + "," + 0;
return d;
});
d3.selectAll("." + containerId + "-mouse-per-line")
.attr("transform", function (d, i) {
var xDate = xScale.invert(mouse[0]),
bisect = d3.bisector(function (d) {
return d.date;
}).right;
var idx = bisect(d.available, xDate);
var beginning = 0,
end = lines[i].getTotalLength(),
target = null;
while (true) {
var pos = lines[i].getPointAtLength(target);
if ((target === end || target === beginning) && pos.x !== mouse[0]) {
break;
}
else if (pos.x > mouse[0]) beginning = target;
else break;
}
var displayFormat;
if (interval === 'weekly' || interval === 'monthly') {
displayFormat = d3.timeFormat("%m/%d");
}
else {
displayFormat = d3.timeFormat("%H:%M:%S");
}
d3.select(this).select('text')
.text(displayFormat(xDate) + " " + yScale.invert(pos.y).toFixed(4))
.attr("font-size", ".5em");
if (i === 1 && (interval === 'daily' || interval === 'hourly')) {
return "translate(" + (mouse[0] - 80) + "," + pos.y + ")";
}
else if (i === 1 && (interval === 'weekly' || interval === 'monthly')) {
return "translate(" + (mouse[0] - 65) + "," + pos.y + ")";
}
else {return "translate(" + mouse[0] + "," + pos.y + ")";}
});
});
}
提前致谢!