Básicamente, estoy representando un mapa de Europa, está tomando todos los países y dándoles un color hasta donde puedo entender de esta línea de código .attr("fill", "#348C31") // Color Of Country
cuando hago clic en un país, puedo resaltarlo usando el atributo onclick y la declaración "this" así d3.select(this).style("fill", '#03a5fd'); ¿Cómo podría seleccionar varios países en esta función d3.select para cambiar el color? Cualquier ayuda sería apreciada ya que estoy confundido en cuanto a cómo se puede hacer.
// Create an Svg variable const svg = d3.select("svg"), width = +svg.attr("width") // Map and projection const projection = d3.geoNaturalEarth1() .scale(width / 1.9) // Lower the num closer the zoom .translate([200, 550]) // (Horizontal, Vertical) // Load external data from geographic api and use data to project path info from map. d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson").then(function (data) { svg.append("g") .selectAll("path") .data(data.features) .join("path") .style("stroke", "white")// Border Lines .attr("fill", "#348C31") // Color Of Country .attr("d", d3.geoPath().projection(projection))Puede resaltar ciertos países en función de los datos, utilizando una función para establecer el atributo/estilo del elemento. Dado que no hay datos en el geo-json excepto el nombre del país, el fragmento a continuación agrega una matriz selectableCountries que contiene algunos países para resaltar. Una forma de hacer esto podría ser agregar condicionalmente una clase
selection.classed("selectable", d => selectableCountries.includes(d.properties.name)) Alternativamente, uno puede filtrar los elementos deseados usando el método selection.filter de d3-selection .
selection.filter(d => selectableCountries.includes(d.properties.name)) .classed("selectable", true)De esa manera, también se pueden agregar detectores de eventos a un subconjunto de la selección.
selection.filter(d => selectableCountries.includes(d.properties.name)) .classed("selectable", true) .on("click", function(event, datum) {}) El datum del elemento en el que se hizo clic se pasa como segundo argumento al controlador de eventos de click . En el fragmento a continuación, esto se usa para resaltar los países con el mismo primer carácter en el controlador de eventos de click .
// The svg const svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"); // Map and projection const projection = d3.geoNaturalEarth1() .scale(width / 1.3 / Math.PI) .translate([width / 2, height / 2]); const geoPath = d3.geoPath().projection(projection); // Countries that can be clicked on const selectableCountries = ["USA", "Brazil", "India", "France", "Algeria"]; // Load external data and boot d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson") .then(function(data) { // Draw the map svg.append("g") .selectAll("path") .data(data.features) .join("path") .attr("class", "country") .attr("d", geoPath) .filter(d => selectableCountries.includes(d.properties.name)) .classed("selectable", true) .on("click", function(event, datum) { d3.selectAll("path.highlighted").classed("highlighted", false); d3.select(this).classed("highlighted", true); const startCharacter = datum.properties.name[0]; svg.selectAll("path") .filter(d => d.properties.name[0] === startCharacter) .classed("highlighted", true); }); }); .country { fill: lightgrey; stroke: white; cursor: not-allowed; } .selectable { fill: teal; cursor: pointer; } .highlighted { fill: dimgrey; } .selectable.highlighted { fill: firebrick; } <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.3.0/d3.min.js"></script> <h1 id="selected"> No country selected. </h1> <svg width="800" height="600"></svg>