D3：什么是平分线？

Question

我正在考虑使用 D3 制作图表，并偶然发现了d3.bisector 。 但是，我不明白它是什么或从文档中做什么。

我在网上找到的几乎所有示例都使用 Date 数组，类似于官方文档中的示例：

var data = [
  {date: new Date(2011,  1, 1), value: 0.5},
  {date: new Date(2011,  2, 1), value: 0.6},
  {date: new Date(2011,  3, 1), value: 0.7},
  {date: new Date(2011,  4, 1), value: 0.8}
];

var bisect = d3.bisector(function(d) { return d.date; }).right;

那么平分线除了从数组元素中选择日期对象之外还做了什么？ *.right返回什么？

如果我有一个简单的一维数组，比如var data = [3, 6, 2, 7, 5, 4, 8]什么用吗？

谢谢你给我启发。

Answer 1

bisect背后的基本思想是这样的：

考虑您提到的数组 - var data = [3, 6, 2, 7, 5, 4, 8]

您想插入一个新值，比如3.5到data数组中，并想知道如何“分区”它。 换句话说，您想知道如果在data数组排序时插入3.5的索引是多少。

   var data = [3, 6, 2, 7, 5, 4, 8]

   //Sorted data

  [2, 3, 4, 5, 6, 7, 8]

  //You want to insert 3.5


  The sorted array after insertion of 3.5 should look something like:

  [2, 3, 3.5, 4, 5, 6, 7, 8]


  So the index of 3.5 in sorted data array is "2".

在某些情况下，您想知道该元素的插入是如何“平分”或“划分”数组的。 在这种情况下，您需要先对该数组进行排序，然后执行我们所说的二分搜索来找出插入该元素的正确位置。

bisectLeft和bisectRight注意在您想要输入数组中已存在的元素的情况下澄清异常。 假设您想在数组中输入另外3 。 有两种情况：

   3* -> The new element to be entered


   [2, 3*, 3, 4, 5, 6, 7, 8] -> entered at "1" (array is still sorted)


   [2, 3, 3*, 4, 5, 6, 7, 8] -> entered at "2" (array is still sorted)

因此，根据我们如何处理这种歧义，我们可以将该元素输入到现有元素的“左侧”或“右侧”。 从文档（标记重点）：

返回的插入点 i 将数组分成两半，以便所有 v < x for v in array.slice(lo, i) 为左侧，所有 v >= x for v in array.slice(i, hi) 为右侧。

在bisectLeft我们得到 1 作为合适的索引，所有重复的条目都将位于该索引的右侧，而bisecRight的情况正好相反。

现在您知道bisectLeft和bisectRight是如何工作的， bisector只允许我们定义一个自定义comparator或accessor函数来对值进行分区或理解对象上的<和> 。

所以这段代码：

  var bisect = d3.bisector(function(d) { return d.date; }).right;

  var bisect = d3.bisector(function(a, b) { return a.date - b.date; }).right;

只是指定使用bisectRight选项并返回一个合适的索引以插入元素，假设数组已排序（按升序）。

因此，如果我以您的示例为基础并假设一个名为bisect的bisector 。 你做到了：

 bisect(data, 3); //it would return 2.

我希望它能澄清事情并让你朝着正确的方向开始。

Answer 2

从文档（您已链接到）：

在数组中定位 x 的插入点以保持排序顺序。

这就是它的作用。 它告诉你应该在哪里插入一个新元素，之后仍然有一个排序的数组。 数组可以是任何类型的结构，这就是为什么有一个访问器函数允许您“分解”此结构以进行搜索。

左右二等分之间的区别在于插入点的位置（在最近元素的左侧或右侧）——数组是按升序还是降序排序。

平分线的一个用例是您希望在将鼠标移到图形上时突出显示最近的数据点，例如参见此示例。