javascript - D3 数据显示的差异

Question

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

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

编辑：如果我切换
var lines = document.getElementsByClassName("line");到
var lines = document.getElementsByClassName("line")[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 +")";
                });
        });
}

标签： javascriptd3.js