D3:什么是平分线? [英] D3: What is a Bisector?

问题描述

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

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.

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

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

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 返回什么?

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

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

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

谢谢你对我的启发.

推荐答案

bisect 背后的基本思想是:

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

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

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

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

   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 Search to find out the correct position for insertion of that element.

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

bisectLeft and bisectRight take 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 3 into the array. There are two situations:

   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)

因此，根据我们如何处理这种歧义，我们可以将该元素输入到现有元素的左侧"或右侧".来自 docs(标记重点):

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):

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

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.

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

In bisectLeft we get 1 as the suitable index, all the duplicate entries will be on the right of that index and the situation is exactly the opposite in bisecRight.

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

Now that you know how bisectLeft and bisectRight work, the bisector just allows us to define a custom comparator or accessor function to parition the values or make sense of < and > on objects as well.

所以这段代码:

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

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

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

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

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

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

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

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

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

这篇关于D3:什么是平分线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！