如何在d3.js中使用套索选择获取选定点

时间:2019-06-13 07:23:19

标签: javascript reactjs d3.js

我正在d3.js散点图中使用套索选择器选择点。现在我想获得选定的点。

代码-

var selected = lasso.items().filter(function(d) {return d.selected===true});
        selected[0].forEach(function(d){
           mySelectedArray.push(d3.select(d).datum())
         });

但是在selected [0]中得到了未定义的值。

这是我的填充代码

     var lasso_draw = function() {

        // Style the possible dots
        lasso.possibleItems()
            .classed("not_possible",false)
            .classed("possible",true);

        // Style the not possible dot
        lasso.notPossibleItems()
            .classed("not_possible",true)
            .classed("possible",false);
    };

    var lasso_end = function() {
        // Reset the color of all dots

        lasso.items()
            .classed("not_possible",false)
            .classed("possible",false);

        // Style the selected dots
        lasso.selectedItems()
            .classed("selected",true)
            .attr("r",9);

        // Reset the style of the not selected dots
        lasso.notSelectedItems()
            .attr("r",5);


        var selected = lasso.items().filter(function(d) {return d.selected===true});
        selected[0].forEach(function(d){
           mySelectedArray.push(d3.select(d).datum())
         });
        console.log("?:",selected[0])


    };


    var lasso = d3.lasso()
    .closePathSelect(true)
    .closePathDistance(100)
    .items(dots)
    .targetArea(chart)
    .on("start",lasso_start)
    .on("draw",lasso_draw)
    .on("end",lasso_end);

      chart.call(lasso);

所有选定的点都应该位于selected [0]中,但是我在selected [0]中变得不确定。

我打印在控制台中选择的内容,得到这个

ut {_groups: Array(1), _parents: Array(1)}

关于扩展-

ut {_groups: Array(1), _parents: Array(1)}
_groups: Array(1)
0: []
length: 1
__proto__: Array(0)
_parents: [g]
__proto__: Object

我还在堆栈溢出上尝试了一些可用的解决方案-

D3.js Scatterplot with Lasso - record selections

Acessing selected points using lasso

Lasso and D3.js

所有解决方案都在说同一件事。

我正在使用d3.j版本4

请帮助

0 个答案:

没有答案