javascript - 如何使用 D3 v3 javascript 为多折线图添加工具提示

Question

我是 D3 的新手，我无法弄清楚为什么工具提示上的值不断重复。我从参考中复制了以下代码：https ://bl.ocks.org/jqadrad/a58719d82741b1642a2061c071ae2375

我想添加一个矩形工具提示，当我将鼠标悬停在线条上而不是在线条上显示它时，我将在一个框上显示所有值，其中所有值都与鼠标位置的标签对齐：

 Example:
    BTC: 22.41
    DOGE: 17.48
    ETH: 85.25
    LTC: 27
    REP: 33.72

我能够进行矩形的悬停和显示，但遗憾的是这些值不断重复。

 Results:
    BTC: 33.72
    DOGE: 33.72
    ETH: 33.72
    LTC: 33.72
    REP: 33.72

这是我的代码：

        .on("mousemove", function (d, i, j) { // mouse moving over canvas
        const coordinates = d3.mouse(svg.node());
        const mouse = d3.mouse(this);
        const posX = d3.event.x;
        const posY = d3.event.y;

        let xPosition = 0;
        let yPosition = 0;

        if (mouse) {
            xPosition = mouse[0] + 20;
            yPosition = mouse[1] - 30;

            if (yPosition <= 0) {
                yPosition = 0;
            }
        }

        d3.selectAll(".mouse-per-line")
            .attr("transform", (d, i) => {
                const xDate = x.invert(mouse[0]);
                const bisect = d3.bisector(d => d.date).left;
                const idx = bisect(d.values, xDate);
                const getLabel = document.querySelectorAll(".label-text");

               

                focus.attr("transform", `translate(${xPosition},${yPosition})`);

我尝试了下面的代码来显示，但我仍然得到相同的结果：

      //d3.select(this).select("text").text(y.invert(y(d.values[idx].dataNum)).toFixed(2));
                // labelFocus.selectAll(".label-text").text(d.values[idx].dataNum);

                // d3.selectAll(".label-text").each((d, i) => { console.log(i); });


                // d3.select(".focus").select(".label-text").text(d.values[idx].dataNum);

                // for (let n = 0; n < document.querySelectorAll(".label-text").length; n++) {
                //     console.log(n + " " + d.name + " " + d.values[n].dataNum);
                // }
                
          
          
          
        // d3.select(this).select("text").text(y.invert(y(d.values[idx].dataNum)).toFixed(2));

          

                // document.querySelectorAll(".label-text")[0].innerHTML = d.values[idx].dataNum;
                // document.querySelectorAll(".label-text")[1].innerHTML = d.values[idx].dataNum;



                // d3.select(`.${this.id}`)
                //     .text(y.invert(y(d.values[idx].dataNum)).toFixed(2));

---

                d3.select(".mouse-line")
                    .attr("d", () => {
                        // console.log(d.values[idx]);
                        let data = `M${x(d.values[idx].date)},${height}`;
                        data += ` ${x(d.values[idx].date)},${0}`;

                        return data;
                    });
                return `translate(${x(d.values[idx].date)},${y(d.values[idx].dataNum)})`;
            });
    });

您能否展示我如何在单个框或矩形内显示相对于鼠标位置的值？代码与上面的参考相同。谢谢您的帮助！

标签： javascripthtmlcssd3.js