Encountering an issue when hovering over the circle SVGs in my browser:
"Uncaught TypeError: Cannot read property '#<Object>' of undefined
at SVGCircleElement.<anonymous> (app.js:35)
at SVGCircleElement.<anonymous> (d3.v6.min.js:2)"
Suspect it relates to the 'n' parameter or the "mousover" component. Interestingly, when using console.log(n) or console.log(n[0]) in a callback function other than mousover's, n is recognized without throwing an error.
Here's my app.js code:
const canvas = d3.select(".canva");
const svgWidth = "100%";
const svgHeight = "100%";
const api_url =
"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/significant_month.geojson";
const svg = canvas
.append("svg")
.attr("width", svgWidth)
.attr("height", svgHeight);
d3.json(api_url).then((data) => {
//in this fn we put our data together
const circle = svg
.selectAll("circle")
.data(data.features)
.enter() //enter
.append("circle"); //append combo
circle
.attr(
"cx",
(d, i) => 40 + Math.floor(Math.random() * 110 * d.properties.mag)
)
.attr("cy", (d, i) => 40 + Math.floor(Math.random() * 200))
.attr("r", (d, i) => d.properties.mag * 4)
.attr("fill", "black") //default fill
.attr("fill", (d, i, n) => d.properties.alert)
.style("top", 150)
.on("mouseover", function (d, i, n) {
d3.select(n[i])
.transition()
.duration(100) //millisecs
.style("opacity", 0.7);
});
});
Data retrieved from USGS API:
{
"type": "FeatureCollection",
"metadata": {
"generated": 1607915888000,
"url": "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/significant_month.geojson",
"title": "USGS Significant Earthquakes, Past Month",
"status": 200,
"api": "1.10.3",
"count": 9
},
"features": [
{
"type": "Feature",
"properties": {
"mag": 6.1,
"place": "25 km E of Yilan, Taiwan",
"time": 1607606398910,
"updated": 1607782466973,
"tz": null,
"url": "https://earthquake.usgs.gov/earthquakes/eventpage/us7000cpqz",
"detail": "https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/us7000cpqz.geojson",
"felt": 237,
"cdi": 5.5,
"mmi": 5.056,
"alert": "green",
"status": "reviewed",
"tsunami": 0,
"sig": 703,
"net": "us",
"code": "7000cpqz",
"ids": ",us7000cpqz,",
"sources": ",us,",
"types": ",dyfi,ground-failure,losspager,moment-tensor,origin,phase-data,shakemap,",
"nst": null,
"dmin": 0.51,
"rms": 0.74,
"gap": 18,
"magType": "mww",
"type": "earthquake",
"title": "M 6.1 - 25 km E of Yilan, Taiwan"
},
"geometry": {
"type": "Point",
"coordinates": [
122.0098,
24.7632,
73.17
]
},
"id": "us7000cpqz"
},
...
truncated for brevity
],
"bbox": [
-168.2667,
-34.5982,
4.95,
140.7971,
52.7655,
589
]
}
View index.html below:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>D3 Intro</title>
<link rel="stylesheet" href="main.css" />
<script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
<div class="canva"></div>
<script src="app.js"></script>
</body>
</html>