Я бы хотел отфильтровать точки, отображаемые на карте, на основе атрибутов с флажками.
Я успешно отрисовываю точки на карте.
var chicagoCrimes = svg.append( "g" );
chicagoCrimes.selectAll( "path" )
.data( Crimes.features )
.enter()
.append( "path" )
.attr( "pointRadius", "10px" )
.attr("class","incident")
Здесь я создаю флажки для фильтрации точек по типу преступления.
<div class="filter_options">
<input class="filter_button" id="HOMICIDE" type="checkbox">a</input><br>
<input class="filter_button" id="ROBBERY" type="checkbox">b</input><br>
<input class="filter_button" id="ASSAULT" type="checkbox">c</input><br>
Я присваиваю значение каждому флажку:
document.getElementById("HOMICIDE").value = "HOMICIDE"
document.getElementById("ASSAULT").value = "ASSAULT"
Затем я хочу сопоставить значение флажка со значением типа преступления (Primary_Type
) в моих данных:
d3.selectAll(".filter_button").on("change", function() {
var type = this.value,
display = this.checked ? "inline" : "none";
console.log(type)
svg.selectAll(".incident")
.filter(function(d) { return d.properties.Primary_Type === type; })
.attr("display", display)
});
Однако фильтрация не происходит, хотя и не выдает ошибку. Я думаю, что утверждение равенства выше не работает правильно; т.е. не соответствует Primary_Type
свойств данных с типом флажков. Базовые данные структурированы так:
var Crimes = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [{
"type": "Feature", "properties": {
"ID": 23757, "Case Number": "JB100159", "Date": "1\/1\/18 2:46", "Block": "039XX W CORNELIA AVE", "IUCR": "110", "Primary_Type": "HOMICIDE", "Description": "FIRST DEGREE MURDER", "Location Description": "AUTO", "Arrest": "FALSE", "Domestic": "FALSE", "Beat": 1732, "District": 17, "Ward": 30, "Community Area": 21, "FBI Code": "01A", "X Coordinate": 1149289, "Y Coordinate": 1922972, "Year": 2018, "Updated On": "1\/8\/18 15:55", "Latitude": 41.94456125, "Longitude": -87.72668181, "Location": "(41.944561251, -87.726681812)"
},
"geometry": { "type": "Point", "coordinates": [ -87.72668181, 41.94456125 ] }
},
{
Любая помощь будет высоко ценится!