Javascript D3数据显示的差异

有人能告诉我为什么显示的数据坐标与显示的数据坐标不同吗？在SVG的原点有一个额外的圆，另一个圆只跟随一行（链接代码笔中的黑线）。 编辑：黑色的下面有一条红线。切换“I”滑块或点击“新建练习”按钮

我知道我从中提取的源代码是解析CSV文件，但我确信它可以按照我尝试的方式完成。我很感激能得到的任何帮助

编辑：如果我切换到var lines=document.getElementsByClassName（“行”）至

var lines=document.getElementsByClassName（“行”）[0]

并相应地调整代码，但随后文本呈现模糊

编辑：今晚之前我会给你20美元

以下是数据显示功能：

function visualize(datum) {
    datum = data;
    console.log("Datum", datum);
    var mouseG = svg.append("g")
        .attr("class", "mouse-over-effects");

    mouseG.append("path") // this is the black vertical line to follow mouse
        .attr("class", "mouse-line")
        .style("stroke", "black")
        .style("stroke-width", "1px")
        .style("opacity", "0");

    var lines = document.getElementsByClassName("line");

    var mousePerLine = mouseG.selectAll(".mouse-per-line")
        .data(datum)
        .enter()
        .append("g")
        .attr("class", "mouse-per-line");

    mousePerLine.append("circle")
        .attr("r", 7)
        .style("stroke", "red")
        .style("fill", "none")
        .style("stroke-width", "1px")
        .style("opacity", "0");

    mousePerLine.append("text")
        .attr("transform", "translate(10, 4)")
        .style("font-size", "13px");

    mouseG.append("svg:rect")
        .attr("width", xScale(datum[datum.length - 1].x) - xScale(datum[0].x))
        .attr("height", height)
        .attr("x", xScale(datum[0].x))
        .attr("fill", "none")
        .attr("pointer-events", "all")
        .on('mouseout', function() { // on mouseout hide line, circles, and text
            d3.select(".mouse-line")
                .style("opacity", "0");
            d3.selectAll(".mouse-per-line circle")
                .style("opacity", "0");
            d3.selectAll(".mouse-per-line text")
                .style("opacity", "0");
        })
        .on("mouseover", function() { // on mouse in show line, circles and text
            d3.select(".mouse-line")
                .style("opacity", "1");
            d3.selectAll(".mouse-per-line circle")
                .style("opacity", "1");
            d3.selectAll(".mouse-per-line text")
                .style("opacity", "1");
        })
        .on("mousemove", function() { // mouse moving over canvas
            var mouse = d3.mouse(this);
            d3.select(".mouse-line")
                .attr("d", function() {
                    var d = "M" + mouse[0] + "," + height;
                    d += " " + mouse[0] + "," + 0;
                    return d;
                });

            d3.selectAll(".mouse-per-line")
                .attr("transform", function(d, i) {
                    var beginning = 0,
                            end = lines[i].getTotalLength(),
                            target,
                            pos;

                    while (true){
                        target = Math.floor((beginning + end) / 2);
                        pos = lines[i].getPointAtLength(target);
                        if ((target === end || target === beginning) && pos.x !== mouse[0]) {
                                break;
                        }
                        if (pos.x > mouse[0]) {
                            end = target;
                        }
                        else if (pos.x < mouse[0]) {
                            beginning = target;
                        } else {
                            break; //position found
                        }
                    }

                    d3.select(this).select('text')
                        .text((xScale.invert(pos.x) - 2).toFixed(2) + ", " + yScale.invert(pos.y).toFixed(2));

                    return "translate(" + mouse[0] + "," + pos.y +")";
                });
        });
}

功能可视化（基准）{
数据=数据；
控制台日志（“基准”，基准）；
var mouseG=svg.append（“g”）
.attr（“类”、“鼠标悬停效果”）；
append（“path”）//这是跟随鼠标的黑色垂直线
.attr（“类”、“鼠标线”）
.style（“笔划”、“黑色”）
.style（“笔划宽度”、“1px”）
.样式（“不透明度”、“0”）；
var line=document.getElementsByClassName（“行”）；
var mousePerLine=mouseG.selectAll（“每行鼠标数”）
.数据（基准）
.输入（）
.附加（“g”）
.attr（“类”，“每行鼠标”）；
鼠标线。附加（“圆”）
.attr（“r”，7）
.style（“笔划”、“红色”）
.style（“填充”、“无”）
.style（“笔划宽度”、“1px”）
.样式（“不透明度”、“0”）；
mousePerLine.append（“文本”）
.attr（“转换”、“翻译（10,4）”）
.style（“字体大小”、“13px”）；
mouseG.append（“svg:rect”）
.attr（“宽度”，xScale（基准[datum.length-1].x）-xScale（基准[0].x））
.attr（“高度”，高度）
.attr（“x”，x刻度（基准[0].x））
.attr（“填充”、“无”）
.attr（“指针事件”、“全部”）
.on（'mouseout'，function（）{//on mouseout隐藏线、圆和文本
d3.选择（“鼠标线”）
.样式（“不透明度”、“0”）；
d3.全选（“.鼠标每行圆”）
.样式（“不透明度”、“0”）；
d3.选择全部（“.鼠标每行文本”）
.样式（“不透明度”、“0”）；
})
.on（“mouseover”，function（）{//在鼠标上显示线、圆和文本
d3.选择（“鼠标线”）
.样式（“不透明度”、“1”）；
d3.全选（“.鼠标每行圆”）
.样式（“不透明度”、“1”）；
d3.选择全部（“.鼠标每行文本”）
.样式（“不透明度”、“1”）；
})
.on（“mousemove”，function（）{//鼠标在画布上移动
var mouse=d3.mouse（this）；
d3.选择（“鼠标线”）
.attr（“d”，函数（）{
var d=“M”+鼠标[0]+，“+高度；
d++=“+鼠标[0]+”，“+0；
返回d；
});
d3.全选（“每行鼠标数”）
.attr（“转换”，函数（d，i）{
var开始=0，
end=行[i]。getTotalLength（），
目标,，
销售时点情报系统；
while（true）{
目标=数学楼层（（开始+结束）/2）；
pos=行[i]。getPointAtLength（目标）；
如果（（目标==结束| |目标==开始）&&pos.x！==鼠标[0]）{
打破
}
如果（位置x>鼠标[0]）{
结束=目标；
}
否则如果（位置x<鼠标[0]）{
开始=目标；
}否则{
break；//找到位置
}
}
d3.选择（这个）。选择（'文本'）
.text（（xScale.invert（pos.x）-2.toFixed（2）+“，”+yScale.invert（pos.y）.toFixed（2））；
返回“translate”（“+mouse[0]+”，“+pos.y+”）；
});
});
}
这里有一个提示：你没有多余的圆圈，你有几十个！而且，因为这是一个线纹织物，它应该只有一条线，对吗？另一行在哪里？绝对是一个有用的提示。我不知道他们是从哪里产卵的。黑色的下面有一条红线。切换“I”滑块或点击“New Exercise”按钮OK，现在我看到了额外的一行。编辑您的问题以添加此信息是一个好主意。完成。你知道为什么会产生这么多的圆吗？是的，我知道：
datum
是一个88个元素的数组。因此，您创建了88个组和88个圆。