Soy nuevo en Javascript y d3 y estoy tratando de que funcione un evento básico de 'mouseover'. El evento parece dispararse antes de que pase el mouse sobre el elemento, lo que me confunde.

Este es mi código:

(function (d3) {

const svg = d3.select('svg');

const width = +svg.attr('width');
const height = +svg.attr('height');

const g = svg.append('g')
    .attr('transform',`translate(${width/2},${height/2})`);

const circle = g.append('circle')
  .attr('r', 30)
    .attr('fill', 'steelblue')
    .attr('stroke','black');

var data=[1,2,3,4,5,6];

d3.select('circle').on("mouseover", function(data) {
    console.log(data);
    svg.selectAll('circle').data(data)
        .enter().append('circle')
            .attr('r', data => data)
            .attr('cx', 20)
            .attr('cy', 20)
}(data));

}(d3));

Lo que espero es que se dibujen más círculos cuando coloco el mouse sobre el primer círculo, sin embargo, todos se dibujan juntos tan pronto como actualizo la página.

Como dije, soy un novato, por lo que cualquier ayuda para comprender esto sería apreciada. Cualquier contexto contextual que pueda proporcionarme / señalarme también sería muy apreciado.

0
Chaz 2 oct. 2019 a las 03:50

1 respuesta

La mejor respuesta

No soy un experto en JavaScript, pero creo que estás usando una función de auto-invocación en la declaración del evento.

Intente eliminar la parte (data) en la declaración de la función

d3.select('circle').on("mouseover", function(data) {
   console.log(data);
   svg.selectAll('circle').data(data)
       .enter().append('circle')
           .attr('r', data => data)
           .attr('cx', 20)
           .attr('cy', 20)
});
0
damian Escobedo 2 oct. 2019 a las 01:00