Javascript D3:什么是平分线?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/26882631/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-22 23:28:39  来源:igfitidea点击:

D3: What is a Bisector?

javascriptarraysd3.js

提问by Terry

I'm looking into making charts with D3, and stumbled upon the d3.bisector. However, I don't understand what it is or does from the documentation.

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

Almost all examples that I find in the web use a Date array, similar to the example in the official documentation:

我在网上找到的几乎所有示例都使用 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;

So what does the bisector do, besides picking the date object from the array elements? What does the *.rightreturn?

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

And is it of any use if I have a simple 1-dimensional array, like var data = [3, 6, 2, 7, 5, 4, 8]?

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

Thanks for enlightening me.

谢谢你给我启发。

回答by Vivek Pradhan

The underlying idea behind bisectis this:

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

Consider the array that you mention - var data = [3, 6, 2, 7, 5, 4, 8]

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

You want to insert a new value let's say 3.5into dataarray and want to know how would that 'partition' it. In other words, you want to know what would be the index of 3.5if it were inserted when dataarray is sorted.

您想将一个新值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:

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


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

There are situations where you would want to know how the insertion of that element 'bisects' or 'divides' an array. In that case, you would want to first sort that array and do what we call a Binary Searchto find out the correct position for insertion of that element.

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

bisectLeftand bisectRighttake care to clarify the anomaly in a situation where you want to enter an element that already exists in the array. Let's say you want to enter another 3into the array. There are two situations:

bisectLeftbisectRight注意在您想要输入数组中已存在的元素的情况下澄清异常。假设您想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)

So depending upon how we take care of this ambiguity, we can enter that element to the 'left' or 'right' of the already existing element. From the docs(Mark the emphasis):

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

The returned insertion point i partitions the array into two halves so that all v <x for v in array.slice(lo, i) for the left side and all v >=x for v in array.slice(i, hi) for the right side.

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

In bisectLeftwe get 1 as the suitable index, all the duplicate entries willbe on the right of that index and the situation is exactly the opposite in bisecRight.

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

Now that you know how bisectLeftand bisectRightwork, the bisectorjust allows us to define a custom comparatoror accessorfunction to parition the values or make sense of <and >on objects as well.

现在你知道如何bisectLeftbisectRight工作中,bisector只允许我们定义一个自定义comparatoraccessor功能分区之前的值或有意义<>在对象上也是如此。

So this piece of code:

所以这段代码:

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

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

Just specifies to use the bisectRightoption and return a suitable index for the insertion of an element assuming the array is sorted(in ascending order).

只是指定使用该bisectRight选项并返回一个合适的索引来插入一个元素,假设数组已排序(按升序)。

So if I were to build up on your example and assuming a bisectornamed bisect. And you did:

因此,如果我要以您的示例为基础并假设一个bisector命名的bisect. 你做到了:

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

I hope it clarifies things and gets you started in the right direction.

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

回答by Lars Kotthoff

From the documentation (that you've linked to):

从文档(您已链接到):

Locate the insertion point for x in array to maintain sorted order.

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

That's what it does. It tells you where a new element should be inserted to still have a sorted array after that. The array can be any kind of structure, which is why there's an accessor function that allows you to "decompose" this structure for the purposes of searching.

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

The difference between left and right bisects is where the insertion point is (to the left or right of the closest element) -- whether the array is sorted ascending or descending.

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

One use case for the bisectors is where you want to highlight the closest data point when moving the mouse over a graph, see e.g. this example.

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