I'm using D3.js (v. 7) with Laravel (v. 8) and I was able to plot a kind of scatter chart on the page. Everything went well, but when I tried to insert some transitions with the following code:

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

I began to receive the following error on the console:

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

I'm not sure if this function (d, i, n) is correct or if anything else should be different as I'm following a tutorial that is using version 5 of D3.

Here the whole js file:

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)
        })
    })