根据d3.js中的多项选择更改圆圈的属性

Question

我正在一张传单地图上画圈，并允许用户通过下拉菜单和滑块过滤这些点。用户的过滤器选择存储在这两个变量中。

var fildata_quant = {'depthError':[0.1, 0.3]};
var fildata_category = {'country':['US','IN'],'magType':['ml','md']};

现在，我正在尝试创建一个选择功能，让用户从过滤后的圆圈中选择圆圈。用户选择的选项存储在这两个变量中。

var seldata_quant = {'depthError':[0.1, 0.2]};
var seldata_category = {'country':['US'], 'magType': ['ml']};

我正在使用此功能创建和更新我的圈子（基于过滤器）-

function updateSubset(filterLoad = 0) { 

// getting the filtered data
var arr = geoData;
var filterObjArray = Object.entries(fildata_category);
var filterQuantArray = Object.entries(fildata_quant);
var result = arr.filter(o => filterObjArray.every(([k,v]) => v.includes(o[k])) && filterQuantArray.every(([k,[l,h]]) => o[k] >= l && o[k] <= h));    
var points = pointsG.selectAll("circle")
                          .data(result);

var pointsEnter = points.enter().append("circle")
                        .attr("class", "points");  

points.merge(pointsEnter).attr("r", function(d) { return sizeScale(d[size_name]); })
      .style("fill-opacity", 0.4)
      .style("fill", function(d){ return ordinalScale(d[color_name]);});

selectionStroke(result, seldata_category,seldata_quant);
map.on('zoomend', updateLayers);
updateLayers();

points.exit().remove();  
}

我想在过滤后的圆圈中为我选择的圆圈添加黑色笔触以进行区分。这就是我写的---

function selectionStroke(data, seldata_category,seldata_quant){
    var selectedObjArray = Object.entries(seldata_category);
    var selectedQuantArray = Object.entries(seldata_quant);
    var selectedData = data.filter(o => selectedObjArray.every(([k,v]) => v.includes(o[k])) && selectedQuantArray.every(([k,[l,h]]) => o[k] >= l && o[k] <= h));

    var selectedCircles = d3.selectAll('.points').data(selectedData).style('stroke-width',2).style("stroke", "black");}

这仅与 seldata_quant 一起工作。但不能单独使用 seldata_category 或与 seldata_quant 结合使用。我不知道我哪里错了

Answer 1

过滤选择

var selectedCircles = d3.selectAll('.points').filter( o => {
      return selectedObjArray.every(([k,v]) => v.includes(o[k])) && 
        selectedQuantArray.every(([k,[l,h]]) => o[k] >= l && o[k] <= h);
    })
    .style('stroke-width',2)
    .style("stroke", "black");