D3.js es una biblioteca construida con javascript y particularmente utilizada para la visualización de datos. Pero esto no es solo, también podemos obtener archivos de diferentes formatos como xml, csv, pdf, etc. utilizando la API d3-Fetch.
Importación de la API d3-Fetch:
<script src = "https://d3js.org/d3.v4.min.js"></script> <script src="https://d3js.org/d3-fetch.v1.min.js"></script>
Sintaxis:
d3.csv(filelocation).then(function);
Tipos de archivo que puede obtener:
- Gota
- Buffer
- CSV
- DSV
- Texto
- HTML
- XML
NOTA: Es esencial crear el archivo antes de buscarlo. De lo contrario arroja error.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" path1tent=
"width=device-width, initial-scale=1.0">
<script src=
"https://d3js.org/d3.v4.min.js">
</script>
<script src=
"https://d3js.org/d3-fetch.v1.min.js">
</script>
</head>
<body>
<script>
d3.text("./fileName.txt").then(function (text) {
// Output: This is from the FileName
console.log(text);
});
</script>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" path1tent=
"width=device-width, initial-scale=1.0">
<script src=
"https://d3js.org/d3.v4.min.js">
</script>
<script src=
"https://d3js.org/d3-dsv.v1.min.js">
</script>
<script src=
"https://d3js.org/d3-fetch.v1.min.js">
</script>
</head>
<body>
<script>
d3.json("jsonFile.json").then(function (data) {
console.log(data);
// Extracting values from the data object
const val = Object.values(data);
// Extracting keys from the data object
const key = Object.keys(data);
for (let i = 0; i < val.length; i++) {
console.log(key[i] + ": " + val[i]);
}
});
</script>
</body>
</html>
Producción:
