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

Question

上下文

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

问题

我想记录每个 selection 点，这样我就可以得到一个数组，其中每个点都有一个它所属的簇列表。例如，Dot1 属于簇 [1,3,4].

问题

存储这些 select 离子的最佳方式是什么？

Answer 1

What would be the best way of storing these selections?

好吧，"opinion based" S.O。但是，我将分享一个非常粗略的解决方案，在该解决方案中，我们不会为每个点创建它所属的集群列表，而是创建一个集群列表及其对应的点。 与您的要求几乎完全相反，但您可以轻松修改生成的数组（每个select离子都有点的数组）来创建您想要的记录（一个数组每个点有 select 个离子）。

第一步是在lasso_end外定义数组：

var clusters = [];

然后，在 lasso_end 中，我们得到 selected 点的列表：

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

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

在这里，我按 ID 映射。然后，我们将数组推入 clusters:

clusters.push(selectedDots);

用户每select点一些点，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，select 你的点并检查控制台：https://plnkr.co/edit/qiZ6bkgZhoSn3XfJW2l7?p=preview

PS：正如我之前所说，这是一个非常粗略的解决方案：如果用户只是点击图表中的任意位置，clusters 将有一个新的空数组。因此，您必须根据自己的目的对其进行修改。

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

D3.js Scatterplot with Lasso - record selections

javascript

jquery

d3.js

scatter-plot

d3.js-lasso