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 的插入點以保持排序順序。

這就是它的作用。 它告訴你應該在哪里插入一個新元素，之后仍然有一個排序的數組。 數組可以是任何類型的結構，這就是為什么有一個訪問器函數允許您“分解”此結構以進行搜索。

左右二等分之間的區別在於插入點的位置（在最近元素的左側或右側）——數組是按升序還是降序排序。

平分線的一個用例是您希望在將鼠標移到圖形上時突出顯示最近的數據點，例如參見此示例。