根据另一个数据集更改d3圆的笔触

Question

我已经建立了基于传单的地图可视化，并在D3中制作了带有圆圈的地图。根据数据选择，将使用值更新地图。现在，我正在尝试根据另一组数据来更改圆的笔触。我的意思是，如果我的数据集中有100行。过滤后，我显示了60个圆圈，在这60个点中，我选择了30个点，我想将笔划添加到这30个点中，并将其余60点保留在地图上。有可能这样做吗？

.style("stroke", ....)

我们可以在这个位置调用另一个数据集吗？ 这是我的代码

 function updateSubset(filterLoad = 0) { 

               function applyLatLngToLayer(d) {
                  var y = d.geometry.coordinates[1]
                  var x = d.geometry.coordinates[0]
                  return map.latLngToLayerPoint(new L.LatLng(y, x))
                }

              var arr = geoData.features;
              var filterObjArray = Object.entries(seldata_category);
              console.log(filterObjArray)
              var filterQuantArray = Object.entries(seldata_quant);
              console.log(filterQuantArray)
              var result = arr.filter(o => filterObjArray.every(([k,v]) => v.includes(o.properties[k])) && filterQuantArray.every(([k,[l,h]]) => o.properties[k] >= l && o.properties[k] <= h));
              console.log(result);
              console.log(seldata_category);

              // handling size of the circles
              var size_name = sizedropDown[current.size];
              var size_extent = sizeExtents[current.size];
              //console.log(colorExtents)
              var sizeScale = d3.scaleSqrt()
                                  .domain(size_extent)
                                  .range([5,15]);

              // handlimg color of the circles
              var color_name = colordropDown[current.color];
              var color_extent = colorExtents[current.color];
            // console.log(color_extent)
              var ordinalScale = d3.scaleOrdinal()
                                .domain(color_extent)
                                .range(c10(color_extent.length));

              console.log(seldata_category)
              console.log(seldata_quant)


              // creating points using paths 
              var points = g.selectAll("circle")
                          .data(result);

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

              points.merge(pointsEnter).attr("r", function(d) {  return sizeScale(d.properties[size_name]);})
                    .style("fill-opacity", 0.4)
                    .style("fill", function(d){ return ordinalScale(d.properties[color_name]);})
                    .on("mouseover",function(d){
                              var details = [];
                              for(var prop in d.properties){
                                details.push("<label>"+prop + " : </label>" + d.properties[prop]);
                              }

                              d3.select("#info_box").selectAll("li").data(details).enter().append("li").html(function(d){return d;});
                              $('#info_box li').addClass('list-group-item');
                    })
                    .on("mouseout", function(d){d3.select("#info_box").selectAll("li").remove();});

             // map.on("viewreset", update);
              //update();

            map.on("viewreset", update);
            update();


            function update() {

                    var bounds = path.bounds(geoData);

                    topLeft = [bounds[0][0] + 10 , bounds[0][1] - 10]
                    bottomRight = [bounds[1][0] + 10 , bounds[1][1] + 10];

                    svg.attr("width", bottomRight[0] - topLeft[0])
                      .attr("height", bottomRight[1] - topLeft[1])
                      .style("left", topLeft[0] + "px")
                      .style("top", topLeft[1] + "px");

                    g.attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");
                    var x = d3.selectAll('circle');
                    x.attr("transform",
                            function(d) {
                                return "translate(" +
                                    applyLatLngToLayer(d).x + "," +
                                    applyLatLngToLayer(d).y + ")";
                            });
                  }  


               points.exit().remove();  
          }