Hola, soy bastante nuevo en la biblioteca D3, y no puedo entender cómo hacer que funcione un evento de clic cuando hago clic en el país, entiendo que la variable 'd' contiene la información del país, pero ¿cómo lo obtengo? para iniciar sesión en la consola, haga clic. He intentado algunos métodos pero no puedo resolverlo. cualquier ayuda apreciada
const svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"); // Map and projection const projection = d3.geoNaturalEarth1() .scale(width / 1.5 ) // Lower the num closer the zoom .translate([200, 700]) // (Horizontal, Vertical) // 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("fill", "#348C31") // Color Of Country .attr("d", d3.geoPath().projection(projection)) .style("stroke", "white")// Border Lines .append("title") .text(d => console.log(d)) //Want to run on click of country, }) const $countyPaths = svg.append("g") .selectAll("path") .data(data.features) .join("path") $countyPaths .attr("fill", d => color(data.get(d.id))) .attr("d", path) .append("title") $countyPaths.on('click',d=>console.log(d.id)) function buttonClick() { window.alert("Boom"); } </script>d3 proporciona el .on(event, fx(event, d)) para manejar eventos. Para registrar el país, puede hacer lo siguiente:
svg.append("g") .selectAll("path") .data(data.features) .join("path") .attr("fill", "#348C31") // Color Of Country .attr("d", d3.geoPath().projection(projection)) .style("stroke", "white")// Border Lines .on("click", (_, d) => console.log(d))Tenga en cuenta que lo primero que recibirá la función del detector de eventos es la información del evento, y lo segundo, los datos.