D3图表中的多系列工具提示

Question

我正在尝试创建D3多系列图表。我已经从此Repo复制了代码，并替换为我的数据。图表运行良好，现在我要添加工具提示。

参考：https://bl.ocks.org/larsenmtl/e3b8b7c2ca4787f77d78f58d41c3da91

当我将鼠标悬停在行上时，我基本上希望获得标签的详细信息。

代码stackblitz

此功能出现问题

d3.selectAll(".mouse-per-line").attr("transform", function(
                d,
                i
            ) {
                // console.log(width / mouse[0]);
                var xDate = x.invert(mouse[0]),
                    bisect = d3.bisector(function(d) {
                        return d.date;
                    }).right;
                var idx = bisect(d.values, xDate);

                var beginning = 0,
                    end = lines[i].getTotalLength(),
                    target = null;

                var 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(that)
                    .select("text")
                    .text(y.invert(pos.y).toFixed(2));

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

1. 我已经声明了x和y，但是在this和x之前它不接受y。
2. 如何添加d3.bisector

框架：Angular 8

TIA