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");

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

1 个答案: