带套索的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将具有一个新的空数组。 因此，您必须根据自己的目的对其进行修改。