D3.js Scatterplot与Lasso - 记录选择

Question

CONTEXT

我正在使用d3.js＆amp;套索以允许用户在散点图上选择点。我希望他们能够在同一个散点图上一个接一个地选择多个集群。我在这里找到了一个如何执行此操作的示例：http://bl.ocks.org/skokenes/511c5b658c405ad68941

问题

我想记录每个点的选择，以便最终得到一个数组，其中每个点都有一个它所属的簇列表。例如，Dot1属于集群[1,3,4]。

问题

存储这些选择的最佳方式是什么？

Answer 1

  

存储这些选择的最佳方法是什么？

那么，对于S.O.来说，这也是“基于意见的”。但是，我将分享一个非常粗略的解决方案，其中不是为每个点创建它所属的集群列表，而是创建一个具有相应点的集群列表。几乎与您提出的相反，但您可以轻松修改生成的数组（每个选择带有点的数组）以创建所需的记录（一个数组包含每个点的选择）。

第一步是在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"]];

这是一个plunker，选择你的点并检查控制台：https://plnkr.co/edit/qiZ6bkgZhoSn3XfJW2l7?p=preview

PS：正如我之前所说，这是一个非常粗糙的解决方案：如果用户只是点击图表中的任何位置，clusters将有一个新的空数组。所以，你必须根据你的目的修改它。