D3 折线图在鼠标悬停时未返回正确的值

Question

我有一个包含当年和比较年/上一期的折线图。我想在悬停时显示一个工具提示，因此它将显示当前年份和比较年份的当前刻度值。但是，我注意到返回的总值与 y 轴上的金额不匹配（请参见下面的屏幕截图）。

根据上图，该值应在 30M - 40M 之间，但显示为 56150248.2。

CodeSandbox

// tooltip on x axis
    d3.selectAll(".xAxis > .tick")
      .style("color", "#65757E")
      .on("mouseover", function (d) {
        console.log("data");
        const mousePosition = d3.pointer(d);
        const data = yScale.invert(mousePosition[0]);
        console.log("pos", mousePosition);
        console.log("data", data);
      })
      .on("mouseout", (d) => {
        console.log("test");
      });

Answer 1

会发生以下情况：

• 您选择的鼠标悬停是d3.selectAll(".xAxis > .tick")
• 在线：.on("mouseover", function (d) { 参数d 指的是通过的事件。我建议 称它为 event 而不是 d 否则会令人困惑
• mousePosition 由一个具有奇怪坐标的数组初始化，即相对于选择的坐标（即刻度）

见：d3.pointer(event[, target])

返回一个由数字 [x, y] 组成的二元素数组，表示 指定事件相对于指定目标的坐标。 事件可以是 MouseEvent、PointerEvent、Touch 或自定义事件 持有 UIEvent 作为 event.sourceEvent。

如果未指定目标，则默认为源事件的 currentTarget 属性（如果可用）。如果目标是 SVG 元素， 事件的坐标使用 屏幕坐标变换矩阵。如果目标是 HTML 元素，事件的坐标相对于 目标边界客户矩形的左上角。 （因此， 坐标系只能相对于客户端进行平移 坐标。另见 GeometryUtils。）否则，[event.pageX, event.pageY] 被返回。

• const data = yScale.invert(mousePosition[0]); 使用 mousePosition[0] 指代 x 位置，您的意思可能是 mousePosition[1]

要使用与 yscale 反转的坐标，您希望坐标相对于直接在 svg 下的平移 g。您已经选择了变量 svg 引用的那个元素。

// tooltip on the g child of the svg
    svg  
      .style("color", "#65757E")
      .on("mouseover", function (event) {
        console.log("data");
        const mousePosition = d3.pointer(event);
        const data = yScale.invert(mousePosition[1]);
        console.log("pos", mousePosition);
        console.log("data", data);
      })
      .on("mouseout", (event) => {
        console.log("test");
      });

更新 06/13/2021 基于以下 cmets： 你可能想做这样的事情（不确定我是否引用了正确的数据，但你可以从这里开始工作：

d3.selectAll(".xAxis > .tick")  
      .style("color", "#65757E")
      .on("mousemove", function (event) {
        const mousePosition = d3.pointer(event, svg.node()); // gets [x,y]
        console.log("mouse position:", mousePosition);
        const currentDate = xScale.invert(mousePosition[0]); // converts x to date
        console.log("date at position:", currentDate);
        const bisect = d3.bisector(d => new Date(d.date)) // create a bisector

        const index_currentData = bisect.right(lineChartData.values[0].dataset, currentDate);     
        if (index_currentData < lineChartData.values[0].dataset.length) {
          console.log(`Current data at index[${index_currentData}]: ${lineChartData.values[0].dataset[index_currentData].value}`);
        }

        const index_comparisonData = bisect.right(comparisonData.values[0].dataset, currentDate);     
        if (index_comparisonData < comparisonData.values[0].dataset.length) {
          console.log(`Comparison data at index[${index_comparisonData}]: ${comparisonData.values[0].dataset[index_comparisonData].value}`);
        }
      })