D3 interactive line graph dataset values reversed - d3.js

Question

I have a line d3.js line graph pictured below:
Two oddities. First notice the vertical mouse line. Notice the hover line at the green line. The data entry 72.3.... is not correct for that date. It is the correct value near 0 on the x axis. The text data is basically reversed to the timeScale(). The green line is plotted correctly.
Second, why does the green line apeear to have shadows? The code for the hover line is below:
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 + ")";}
});
});
}
Thanks in advance!