Tengo un mapa que estoy tratando de hacer interactivo, de modo que cuando el usuario haga clic en un distrito en particular, muestre algunos datos sobre ese distrito (% de la población en categorías x/y/z, tamaño de la población, etc.) . El conjunto de datos incluye todos esos datos, así como los geodatos. Sin embargo, después de representar el mapa, no puedo encontrar los datos del distrito en el objeto de evento. A continuación se muestra cómo está estructurado el mapa (está en un componente React):
function Map({ data, selectedDistricts }) { . . . const districtPathGenerator = d3.geoPath(projection) function handleClick(e) { console.log(e) // <-- how to display the data associated with the clicked-on district? } return ( <div ref={ref}> <svg width="500px" height="450px"> <g> {data.map((district) => { return ( <path d={districtPathGenerator(district)} onClick={(e) => handleClick(e)} > </path> ) })} </g> </svg> </div> ) }intentalo
function Map({ data, selectedDistricts }) { . . . const districtPathGenerator = d3.geoPath(projection) function handleClick(e, district) { console.log(e, district) // <-- how to display the data associated with the clicked-on district? } return ( <div ref={ref}> <svg width="500px" height="450px"> <g> {data.map((district) => { return ( <path d={districtPathGenerator(district)} onClick={(e) => handleClick(e, district)} > </path> ) })} </g> </svg> </div> ) }También puede tener un solo detector de eventos en la etiqueta g y usar event.target para obtener acceso a los detalles de la path en la que se hizo clic. Esto se llama delegación de eventos y da como resultado un gran rendimiento.
const g = document.querySelector('svg g') g.addEventListener("click", event => { console.log(event.target.getAttribute("key")) }) const data = { a: "M50 0 L10 10", b: "M100 10 L20 20", c: "M200 20 L30 30", } g.innerHTML = Object.keys(data).map(key => ` <path key="${key}" stroke="black" stroke-width="5" d="${data[key]}" > </path> `).join("") <svg viewBox="0 0 200 200"> <g></g> </svg>