Я построил визуализацию карты на основе Leaflet с кругами на ней, сделанной в 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();
}