Estoy usando D3.js (v. 7) con Laravel (v. 8) y pude trazar una especie de gráfico de dispersión en la página. Todo salió bien, pero cuando traté de insertar algunas transiciones con el siguiente código:

 .on('mouseover', function (d, i, n) { d3.select(n[i]) .transition() .duration(128) .style('opacity', 0.75) })

Empecé a recibir el siguiente error en la consola:

 Uncaught TypeError: Cannot read properties of undefined (reading '#<Object>')

No estoy seguro de si esta función (d, i, n) es correcta o si algo más debería ser diferente, ya que estoy siguiendo un tutorial que usa la versión 5 de D3.

Aquí todo el archivo js:

 import * as d3 from 'd3'; // SVG common attributes const width = '100%'; const height = '100%'; // set html element id where chart will be plotted const earthquake = d3.select('#earthquake'); // create svg background const svg = earthquake .append('svg') .attr('width', width) .attr('height', height); // create circles const circle = svg.selectAll('circle'); // populate circles // api dataset source const url = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/significant_month.geojson'; d3.json(url) // parse json .then(data => {circle .data(data.features) // data to use .enter().append('circle') // automatically create new circle .attr('cx', (d, i) => ((i + 1) * 100)) // x axis circle center coordenate .attr('cy', (d, i) => d.properties.mag * 10) // y axis circle center coordenate .attr('r', (d, i) => d.properties.mag * 10) // circle radius lenght .attr('fill', (d, i) => d.properties.alert) // circle fill color .on('mouseover', function (d, i, n) { d3.select(n[i]) .transition() .duration(128) .style('opacity', 0.75) }) })