D3:什么是平分线

D3: What is a Bisector?

本文关键字：平分线 什么 D3      更新时间：2023-09-26

我正在考虑用 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]，它有什么用吗？

谢谢你启发我。

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

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

您想插入一个新值，比如说3.5 data数组中，并想知道它将如何"分区"它。换句话说，您想知道如果在对数组进行排序时插入3.5索引data索引是什么。

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 this:
[2, 3, 3.5, 4, 5, 6, 7, 8]

So the index of 3.5 in the 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 将数组分成两半，以便 array.slice(lo， i( 中的所有 v < x 表示左侧，右侧的所有 v = x 表示 v。

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.

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

从文档(您已链接到(：

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

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

左平分

和右平分之间的区别在于插入点的位置(在最近元素的左侧或右侧( - 无论数组是升序还是降序排序。

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

相关文章：