javascript - D3 折线图悬停时相同的刻度给出不同的值

Question

我试图获取该确切时间点(x轴)的行值，但是相同的刻度给我不同的值取决于我悬停在哪一侧，如果是从左侧，则表示当前数据位于索引[123]:10586174，如果我从右侧悬停，它会显示索引[124]:10586174处的当前数据。这只是一个像素差异，因为线条描边宽度只有3像素，但值不同。这是非常不一致的，一次勾选应该只返回一个与该日期相关的值。

CodeSandbox

//Set up interactions
    d3.selectAll(".xAxis > .tick")
      .style("color", "#65757E")
      .on("mousemove", function (event) {
        event.path[0].style.stroke = "#0D2633";
        d3.select("line").style("z-index", 0);
        const mousePosition = d3.pointer(event, svg.node()); // gets [x,y]
        const currentDate = xScale.invert(mousePosition[0]); // converts x to current date

        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 comparisonDate = xScale2.invert(mousePosition[0]); // converts x to comparison date

        const index_comparisonData = bisect.right(
          comparisonData.values[0].dataset,
          comparisonDate
        );

        if (index_comparisonData < comparisonData.values[0].dataset.length) {
          const tooltipComparisonValue =
            comparisonData.values[0].dataset[index_comparisonData].value;
        }
      })

Answer 1

我可以建议这种方法， 当您创建报价时，您可以添加带有值的数据属性，例如

    d3.selectAll(".xAxis .tick text")
      .attr("dy", "25px")
      .style("color", "#65757E")
      .style("text-transform", "uppercase")
      // here
      .attr("dataValue", (d) => d);

然后当你处理mousemove时，你将不会采取一个位置，因为它可能与你的刻度值不一致，而是属于目标刻度的属性值。

内部事件监听器:

        const currentDate = event.target
          .closest("g")
          .querySelector("text")
          .getAttribute("dataValue");

现在，因为您有确切的日期，您可以在数据集中找到该值索引(或只是值)，

// find index by comparing the date
const findIndexOfHoveredTick = lineChartData.values[0].dataset.findIndex(
  (d) => new Date(d.date).toString() === currentDate
);

// here you can apply this index to find object inside dataset
lineChartData.values.forEach((value) => {
  console.log(value.dataset[findIndexOfHoveredTick], "Line Value");
});

如果您还需要从 comparisonData 中获取它，您可以执行相同的操作，或者更好地合并它们[...lineChartData.values, ...comparisonData.values] 查找相同日期的Index，并进行计算。

这是经过更改的 fork:https://codesandbox.io/s/kind-morning-91fg8?file=/src/LineChart.js:9398-9533