d3.js - 使用D3.js时，有没有办法自动获取最近的有数据的 `key`？

Question

当我们使用 D3.js 时，为了简单起见，我们有数据，即股票价格:

2021-03-18   $38.10
2021-03-19   $38.60
2021-03-22   $38.80

我们使用 D3 绘制股票价格的折线图，然后将鼠标移动到价格上方“悬停”，它会显示该日期的价格。
现在我正在使用

d3.select("svg").on("mousemove", (ev) => {
  const hour = xScale.invert(ev.offsetX - dimensions.margin.left).getHours();

获取用户悬停的小时数。 xScale是一个尺度函数 scaleTime()从域到范围，以及 xScale.invert是将范围转换回域的函数。

如果时间是中午 12 点或更晚，我会在第二天考虑它，如果它早于或等于，我会在同一天考虑。这是因为 2021-03-19 的股票价格被认为是在上午 12:00(午夜)，所以如果我到晚上 9 点，例如，鼠标光标真的很接近第二天。

然后，假设我确定它是 2021-03-20 ，然后我检查是否有股价数据。但由于是星期六，没有股票数据，我用函数查了一下，方法如下:

我首先会回到2021-03-19看看有没有股价。 (我首先构建了一个查找表来将日期映射到数据)。如果有，那就使用它。

但如果没有，我只使用 delta 1 天并越来越远，所以它会去 2021-03-21然后增加增量并使用 -delta检查 2021-03-18 ，所以我只是使用一个点，然后随着增量的增加“稍后”和“之前”，直到我能够找到价格

换句话说，我有“第一候选人”和“第二候选人”。如果第一个候选人有数据，则使用它。否则，尝试第二个候选人。如果仍然不起作用，则从第一个候选开始工作并使用 delta 1 天并移动“稍后”或“之前”，如果不起作用，请使用 2 天和 3 天的增量，直到我能够找到包含数据的日期。

然后我用这个价格显示在屏幕上，报告日期和价格是什么

但是这个方法有点低级。 D3.js 是否已经有一个方法可以直接做到这一点:吐出一个 invert编号，最接近 dataset 中有数据的键?

Answer 1

d3.js 提供了几个函数可以使用，具体取决于具体情况:
1. 您在屏幕空间中操作并希望将当前鼠标位置映射到表示单个数据对象的最近点上的可视化
在这种情况下，您可能希望使用 d3-delaunay .

d3-delaunay is a fast library for computing the Voronoi diagram of aset of two-dimensional points. One can use delaunay.find to identify the data point closest to the pointer. Here is one example.

2.如果你在数据域中操作(例如因为你已经将鼠标位置倒置到数据域)

如 @Gerardo Furtado指出，您可以使用 d3.bisect .

d3.bisect finds the position into which a given value can be insertedinto a sorted array while maintaining sorted order. If the valuealready exists in the array, d3.bisect will find its positionefficiently. Here is oneexample.

另见: D3: What is a Bisector?和 d3.bisector using Date() Object does not resolve

d3.js 提供的另一个选项是 d3.scaleThreshold .

Threshold scales allow you to map arbitrary subsets of the domain to discrete values in the range. The input domain is still continuous, and divided into slices based on a set of threshold values.

想法如下:
您创建一个 d3.scaleThreshold 将任何日期(= 连续域)映射到给定数据的固定有效日期集，方法是将其映射到最近的日期。为此，您必须将域指定为位于 n 个有效日期之间的 n - 1 个日期的数组。范围是有效日期的数组。
根据您的数据，它可能不如 d3.bisect 有效。

const data_original = [{ date: "2021-03-18", value: "38.10"},
         { date: "2021-03-19", value: "38.60"},
         { date: "2021-03-22", value: "38.80"},
];
const data_types_converted = data_original.map(d => ({"date": new Date(d.date), "value": +d.value}));
const data_just_dates = data_types_converted.map(d => d.date);

let newDate = new Date("2021-03-17");
console.log(newDate + " -> " + getClosestDate(newDate, data_just_dates));
newDate = new Date("2021-03-18");
console.log(newDate + " -> " + getClosestDate(newDate, data_just_dates));
newDate = new Date("2021-03-19");
console.log(newDate + " -> " + getClosestDate(newDate, data_just_dates));
newDate = new Date("2021-03-20");
console.log(newDate + " -> " + getClosestDate(newDate, data_just_dates));
newDate = new Date("2021-03-21");
console.log(newDate + " -> " + getClosestDate(newDate, data_just_dates));
newDate = new Date("2021-03-22");
console.log(newDate + " -> " + getClosestDate(newDate, data_just_dates));
newDate = new Date("2021-03-23");
console.log(newDate + " -> " + getClosestDate(newDate, data_just_dates));

function getClosestDate(newDate, validDates) {
  const domain = [];
  let midday_local;
  let midday_UTC;
  
  validDates.forEach((d,i) => {
    if (i < validDates.length - 1) {
      midday_local = new Date((validDates[i].getTime() + validDates[i + 1].getTime()) / 2); // midday in local time
      midday_UTC = convertDateToUTC(midday_local); // midday in UTC time
      domain.push(midday_UTC);
    }
  });

  const scale = d3.scaleThreshold()
    .domain(domain)
    .range(validDates);

  return scale(newDate)
}

function convertDateToUTC(date) { 
  return new Date(
    date.getUTCFullYear(), 
    date.getUTCMonth(), 
    date.getUTCDate(), 
    date.getUTCHours(), 
    date.getUTCMinutes(), 
    date.getUTCSeconds()
    ); 
}

<script src="https://d3js.org/d3.v6.min.js"></script>