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

问题描述

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

几乎所有的例子，我发现在网络中使用一个Date数组，类似于示例中官方文档：

  var data = [
 {date：new Date ，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 返回什么？

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

感谢您的启发。

解决方案

bisect ：

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

您要插入一个新值，例如 3.5 到 数组，并想知道如何分区它。换句话说，如果在 data 数组排序时插入 3.5 。

  var data = [3，6，2，7，5，4，8] 
 
 //排序数据
 
 [2,3,4,5,6,7,8] 
 
 //您要插入3.5 
 
 
插入3.5之后的排序数组应该如下所示：
 
 [2,3,3.5,4,5,6,7,8] 
 
 
因此，在排序数据数组中的索引为2。 
  

在某些情况下，你想知道如何插入那个元素'bisects' ' 数组。在这种情况下，您需要先对该数组进行排序，然后执行我们所称的二进制搜索以找出正确的位置用于插入该元件。

bisectLeft 和 bisectRight 在您要输入数组中已存在的元素的情况下。假设您要在数组中输入另一个 3 。有两种情况：

  3 *  - >要输入的新元素
 
 
 [2,3 *，3,4,5,6,7,8]  - >在1处输入（数组仍然排序）
 
 
 [2,3,3 *，4,5,6,7,8]输入为2（数组仍然排序）
  

因此，取决于我们如何处理这种歧义，我们可以将该元素输入到已经存在的元素的left或right。从文档（标记重点）：

< blockquote>

返回的插入点i将数组分成两半，以便对于左侧的array.slice（lo，i）中的v的所有v <

>在 bisectLeft 中，我们得到1作为合适的索引，所有重复的条目将在该索引的右边，情况完全相反现在你知道如何 bisectLeft 。 和 bisectRight 工作，平分线只是允许我们定义一个自定义比较器或存取器函数来分隔值，或者对对象有< 和>

因此，这段代码：

  var bisect = d3。 （函数（d）{return d.date; }）。对; 
 
 var bisect = d3.bisector（function（a，b）{return a.date  -  b.date;}）。 
  

只需指定使用 bisectRight 选项

因此，如果我建立在你的例子上，假设一个 bisector 命名为 bisect 。你做了：

  bisect（data，3）; //它会返回2. 
  

我希望它澄清的事情，让你开始在正确的方向。

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.

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;

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

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

Thanks for enlightening me.

解决方案

The underlying idea behind bisect is this:

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

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

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.

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.

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.

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 bisectRight option and return a suitable index for the insertion of an element assuming the array is sorted(in ascending order).

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屋！