带套索的 D3.js 散点图 - 记录选择答案

【问题标题】：D3.js Scatterplot with Lasso - record selections带套索的 D3.js 散点图 - 记录选择
【发布时间】：2016-11-26 00:26:56
【问题描述】：

上下文

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

问题

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

问题

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

【问题讨论】：

【解决方案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 将有一个新的空数组。因此，您必须根据自己的目的对其进行修改。

【讨论】：