Estoy aprendiendo d3.js y tengo un problema al enviar datos simples desde un archivo csv. El error en la consola es: "ReferenceError: Can't find variable: data"
Aparentemente, el compilador no puede identificar el método .data() de d3. El que llamamos para iterar los elementos svg:
const circles = svg.selectAll("circles").data(data);Antes de esta declaración, llamé a los datos de esta manera y se muestran normalmente en la consola.
d3.csv("data/HousePricesAroundtheWorld.csv").then((data) => { data.forEach((d) => { d.number = Number(d["annual percent change"]); }); console.log(data); });En su código, solo se puede acceder a los data dentro de la función que está pasando a .then() . Una opción es crear una función que dibuje su gráfico. Esta función puede tener un parámetro para los datos del gráfico. Puede pasar esta función a .then() para que pase los datos leídos del archivo. Aquí hay un ejemplo.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://d3js.org/d3.v7.js"></script> </head> <body> <div id="chart"></div> <script> d3.csv('https://raw.githubusercontent.com/curran/data/gh-pages/uci_ml/iris/iris.csv', d => ({ ...d, description: `${d.class}: ${d.petal_length} x ${d.petal_width}` })) .then(chart); function chart(data) { d3.select('#chart') .selectAll('p') .data(data) .join('p') .text(d => d.description); } </script> </body> </html>