Adjunté un evento de click a un elemento de un gráfico D3:
import * as d3 from 'd3'; const vis = {} vis.svg = d3.select(element) .append("svg") .attr("width", 500) .attr("height", 500) vis.g = vis.svg .append("g") const circles = [20]; const myCircles = vis.g.selectAll('circle').data(circles).enter() myCircles .append('circle') .attr('id', (d, i) => { return 'myCircle' + i}) .attr('cx', 100) .attr('cy', 100) .attr('r', (d, i) => d) .attr('fill', 'gainsboro') .attr('stroke', 'grey') .on('click', function(event, d) { d3.select(this).attr('stroke', 'black') d3.select(this).attr('stroke-width', '2px') }) ¿Hay alguna manera de activar este evento de click desde fuera de un elemento? Intenté hacer esto:
d3.select("#myCircle0").click();Pero no funciona. ¿Hay alguna forma alternativa de activar el evento D3 para un elemento específico?
Tienes que despachar el evento:
d3.select("#myCircle0").dispatch("click");Aquí hay una demostración con un código ligeramente modificado, enviando el clic al primer círculo:
const vis = {} vis.svg = d3.select("body") .append("svg") .attr("width", 500) .attr("height", 500) vis.g = vis.svg .append("g") const circles = [20, 20, 20]; const myCircles = vis.g.selectAll('circle').data(circles).enter() myCircles .append('circle') .attr('id', (d, i) => { return 'myCircle' + i }) .attr('cx', (_, i) => 100 + 50 * i) .attr('cy', 100) .attr('r', (d, i) => d) .attr('fill', 'gainsboro') .attr('stroke', 'grey') .on('click', function(event, d) { d3.select(this).attr('stroke', 'black') d3.select(this).attr('stroke-width', '2px') }); d3.select("#myCircle0").dispatch("click"); <script src="https://d3js.org/d3.v7.min.js"></script>