es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Lanzando un evento D3 para un elemento.

27 May, 2023 Programación

He adjuntado un evento 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')
    })

¿Existe alguna manera de disparar este evento click desde fuera de un elemento? Intenté hacer esto:

d3.select("#myCircle0").click();

Pero no funciona. ¿Existe alguna otra manera de disparar el evento D3 para un elemento específico?

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, existe una alternativa para disparar un evento de D3 en un elemento específico. En lugar de usar el método .click(), se puede utilizar el método .dispatch() para disparar un evento personalizado en el elemento seleccionado. Por ejemplo, se puede disparar un evento customClick en el elemento myCircle0 de la siguiente manera:

    d3.select("#myCircle0").dispatch("customClick");

    Y se puede adjuntar un escucha para el evento customClick de la siguiente manera:

    d3.select("#myCircle0")
  .on("customClick", function(event, d) { 
    d3.select(this).attr('stroke', 'black');
    d3.select(this).attr('stroke-width', '2px');
  });

    Tenga en cuenta que necesita registrar el evento customClick con el elemento antes de poder dispararlo.

Comments are closed.