使用套索访问选定的点 [英] Acessing selected points using lasso

问题描述

我正在经历D3.js的绘图。我找到了一种方法来选择散点图中的点，并从这篇很棒的博客文章此处将其突出显示

I was going through the D3.js plottings. I found a way to select the points in a scatter plot and highlight them in the plot from this awesome blog post here

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

I want to further extend this and make a list of the classes of the selected points along with highlighting them.

如果我选择了与 setosa 相对应的4点和 virginica 我想要一个像这样的数组。

If I selected 4 points corresponding to setosa and 2 points of virginica I want to get a array like this.

[[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函数玩了一点，但我无法实现。

I want this to happen at the end of lasso. I played around a little bit with lasso_end function but I was not able to achieve it. How can this be achieved.?

推荐答案

我在这里提出的答案将为您提供一系列对象。由此，要拥有一个数组（根据需要），您只需要进行一些小的调整即可，您可以自己调整。

My proposed answer here will give you an array of objects. From that, for having an array of arrays (as you want) you just need some minor adjustments, which you can do yourself.

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

First, let's create an empty array:

var mySelectedArray = [];

然后，在 lasso_end 内，让我们选定的元素，实际上是一个具有DOM元素内部数组的数组：

Then, inside the lasso_end, let's get the selected elements, which are actually one array with an inner array of DOM elements:

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

然后，使用该数组，让他们获取数据，将其推入我们的空数组：

Then, using that array, let's get their data, pushing them to our empty array:

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

以下是更新的bl.ocks，选择圆点并查看控制台： http://bl.ocks.org/GerardoFurtado/raw/bae234539423e4f4e4f3e4f4e4f3e4f3e4f3e4e8f4e8e3f0f4e8e3e0f0f8e8e3e0bf3e8e8e0fb3e8e8e8efbfffbffffbfffbfffbf3e8fbffbfffbfffbfffbf3e8fbfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffbf。 >

Here is the updated bl.ocks, select the dots and have a look at the console: http://bl.ocks.org/GerardoFurtado/raw/53ae382aa8fd2ea751683e946bc50b19/03ef4083122568306237493afbdc4e442f2398f8/

PS：您也可以简单地使用D3 selectAll 而不是 lasso.items（）并过滤选择的：true ，这为您提供了一个简单的数组。

PS: you can also simply use a D3 selectAll instead of lasso.items()and filter for selected: true, which gives you a simple array.

这篇关于使用套索访问选定的点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！