javascript - D3.js 散点图与套索 - 记录选择

Question

上下文

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

问题

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

问题

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

Answer 1

What would be the best way of storing these selections?

嗯，这对于 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.push(selectedDots);

每次用户选择一些点，簇就会变得更大。所以，在第一次，你可以得到这样的东西:

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