javascript - 使用套索访问选定的点

Question

我正在研究 D3.js 绘图。我找到了一种方法来选择散点图中的点并在这篇很棒的博客文章 here 的图中突出显示它们。

我想进一步扩展它并列出所选点的类别并突出显示它们。

如果我选择了对应于 setosa 的 4 个点和 virginica 的 2 个点，我想得到一个这样的数组。

[[setosa, 1.2, 3.4],
[setosa, 1.2, 3.4],
[setosa, 1.2, 3.4],
[setosa, 1.2, 3.4],
[virginica, 1.2, 3.4],
[virginica, 1.2, 3.4]]

我希望这发生在套索结束时。我玩了一下 lasso_end 函数，但我无法实现它。如何实现？

Answer 1

我在这里提出的答案将为您提供一组对象。由此，为了拥有一组数组(如您所愿)，您只需要进行一些小的调整，您可以自己完成。

首先，让我们创建一个空数组:

var mySelectedArray = [];

然后，在 lasso_end 中，让我们获取选定的元素，它们实际上是一个包含 DOM 元素内部数组的数组:

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

然后，使用该数组，让我们获取他们的数据，将它们推送到我们的空数组:

selected[0].forEach(function(d){
    mySelectedArray.push(d3.select(d).datum())
});

这是更新的 bl.ocks，选择点并查看控制台:http://bl.ocks.org/GerardoFurtado/raw/53ae382aa8fd2ea751683e946bc50b19/03ef4083122568306237493afbdc4e442f2398f8/

---

PS:您也可以简单地使用 D3 selectAll 而不是 lasso.items() 并针对 selected: true 进行过滤，这给出你是一个简单的数组。