帶套索的D3.js散點圖-記錄選擇

Question

語境

我正在使用d3.js和Lasso，以便允許用戶選擇散點圖上的點。 我希望他們能夠在一個散點圖上一個接一個地選擇多個集群。 我在這里找到了如何執行此操作的示例： http : //bl.ocks.org/skokenes/511c5b658c405ad68941

問題

我想記錄每個點的選擇，以便得到一個數組，每個點都有一個屬於它的簇列表。 例如，Dot1屬於群集[1,3,4]。

題

存儲這些選擇的最佳方法是什么？

Answer 1

存儲這些選擇的最佳方法是什么？

好吧，對於SO來說，它也是基於“觀點”的。但是，我將分享一個非常粗糙的解決方案，在該解決方案中，我們將為每個點創建一個屬於其的簇的列表，而不是為每個點創建一個簇列表。 幾乎與您要的相反 ，但是您可以輕松地修改結果數組（每個選擇帶有點的數組）以創建所需的記錄（每個選擇帶有一個點的數組）。

第一步是在lasso_end外部定義數組：

var clusters = [];

然后，在lasso_end內部，我們得到一個選定點的列表：

var selected = lasso.items().filter(function(d){
    return d.selected===true
});

var selectedDots = selected[0].map(d=>d.id);

在這里，我通過ID進行映射。 然后，將數組推入clusters ：

clusters.push(selectedDots);

每次用戶選擇一些點時， cluster就會變大。 因此，在第一時間，您可以獲得以下內容：

var clusters = [["dot_62","dot_68","dot_87","dot_119"]];

並且，第二次：

var clusters = [["dot_62","dot_68","dot_87","dot_119"],
    ["dot_53","dot_57","dot_80","dot_81","dot_93"]];

這是一個小矮人，選擇您的點並檢查控制台： https ://plnkr.co/edit/qiZ6bkgZhoSn3XfJW2l7?p=preview

PS：正如我之前所說，這是一個非常粗糙的解決方案：如果用戶僅單擊圖表中的任意位置，則clusters將具有一個新的空數組。 因此，您必須根據自己的目的對其進行修改。