Выбор конкретного пути SVG на основе атрибута JSON в d3.js

Question

Можно ли выбрать только один из SVG-путей, созданных из файла geoJSON с помощью D3? В моем случае пути - это области на карте. Пользователь может выбрать область из выпадающего списка. Я хочу использовать выбранное значение из этого списка, чтобы выбрать путь с соответствующим атрибутом и покрасить его по-другому. Имя области является одним из атрибутов в файле geoJSON.

Можно ли дополнительно квалифицировать d3.select("path"), добавив какой-то фильтр?

Так выглядит код. ..

d3.json(polygonFile, function(json) {
            for (var g = 0; g < json.features.length; g++) {
              if(json.features[g].properties.NAME == selectedAreaName) {
                d3.select("path") //THIS IS WHERE I NEED TO ADD THE FILTER ...
                    .transition()
                    .duration(600)
                    .style("filter", "brightness(0.7)")
              }
            }
          }); 

Answer 1

Я бы порекомендовал сделать все это более D3-esque, вместо итерации по json.features. json.features - это data , поэтому давайте используем подход связывания данных D3.

// this would get set elsewhere
// be sure to call update() any time this chages!
let selectedAreaName = "area51";

let myData; // storing this someplace accessible from outside the d3.json callback
d3.json(polygotFile, json => {
    myData = json;
    update();
});

function update() {
    // create initial features selection based on data
    let features = d3.select("svg").selectAll("path").data(myData.features);

    // add new features to the selection using the enter selection,
    // and merge back into the original update selection
    features = features.enter().append("path")
        .attr("d", d3.geoPath())
        .merge(features);

    // this is what you're trying to do:
    // every time update() runs, it’ll apply a class
    // to paths whose name == selectedAreaName
    features.classed("selected", d => d.properties.NAME == selectedAreaName);
}

Answer 2

Есть 2 способа решения вашей проблемы:

Вы можете использовать d3.selectAll и фильтровать ваши пути в соответствии с их данными / конкретными атрибутами.

d3.selectAll("path").filter((d) => d.uniqueId === 12345)

Вы даже можете использоватьСелектор вместо функции:

d3.selectAll("path").filter(".className")

В случае, если есть много путей, вы не хотите использовать фильтр, потому что он будет перебирать все пути перед возвратом правильного, поэтому вы можете установить атрибут id ииспользуйте d3.select('#yourpathid')

Надеюсь, это поможет!