Actualmente estoy trabajando en un GeoJSON de los Estados Unidos con un evento de mouseover en cada estado (por ejemplo, una cosa que ocurre es que cambia el borde de los estados a rojo brillante para mostrar cuál está resaltado).
Algunos estados son bastante pequeños, especialmente en Nueva Inglaterra. Estaba tratando de pensar en una manera de evitar esto y decidí implementar botones adicionales en el costado que tendrían el mismo evento de mouseover vinculado a estados específicos que consideré pequeños.
Mi pregunta es: ¿cómo haría para que algo como resaltar las fronteras de los estados sucediera al pasar el mouse sobre los botones adicionales?
Mi implementación actual de los estados originales se encuentra a continuación (no he comenzado a trabajar en los botones adicionales):
.on("mouseover", function(d) { d3.select(event.target).attr("stroke", "red").attr("stroke-width", "3"); displayData(d); }); .on("mouseout", function(d) { d3.select(event.target).attr("stroke", "black").attr("stroke-width", "1"); hideData(d); });displayData(d) y hideData(d) se utilizan para mostrar información sobre herramientas. Como puede ver, la forma en que funciona el mouseover en este momento es capturando el event.target. ¿Cómo replicaría esto para un botón separado? ¿Es posible vincular de alguna manera el event.target de ese botón al estado correspondiente?
Simplemente use selection.dispatch , que:
Distribuye un evento personalizado del tipo especificado a cada elemento seleccionado, en orden.
Aquí hay un ejemplo básico, al pasar el cursor sobre los círculos se llamará a una función determinada. Haga clic en el botón para enviar un "mouseover" al segundo círculo.
const svg = d3.select("svg"); const circles = svg.selectAll(null) .data(["foo", "bar", "baz"]) .enter() .append("circle") .attr("id", (_, i) => `id${i}`) .attr("cy", 70) .attr("cx", (_, i) => 30 + 100 * i) .attr("r", 30) .style("fill", "teal") .on("mouseover", (event, d) => { console.log(`My name is ${d}`); }); d3.select("button").on("click", () => d3.select("#id1").dispatch("mouseover")); .as-console-wrapper { max-height: 15% !important;} <script src="https://d3js.org/d3.v7.min.js"></script> <button>Click me</button> <svg></svg>