D3交互式折线图数据集值反转

Question

我有一行d3.js线图如下图所示：

两个怪异。首先注意垂直鼠标线。注意悬停线在绿线。数据条目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 + ")";}
                        });
                });
            }

提前致谢！