d3.js - Cargando archivo csv externo en jsfiddle

dc.js

Question

Intento crear un jsfiddle para uno de los ejemplos de dc.js. No puedo cargar un archivo externo usando una URL y d3.csv() .

¿Puede alguien sugerir cómo cargar un archivo csv usando d3.csv en jsfiddle?

Answer 1

El enfoque que suelo usar para los datos de CSV en los ejemplos de JSFiddle es

a. Coloque los datos en un bloque <pre> al final del marcado HTML, generalmente con los "datos" de identificación.

segundo. Agregue pre {display:none;} al CSS.

do. Reemplace la d3.csv(filename, callback) función d3.csv(filename, callback) con una llamada d3.csv.parse(text) , utilizando el contenido de texto del bloque <pre> como entrada a la función de análisis.

Como la función de análisis no utiliza una devolución de llamada, simplemente devuelve la matriz de datos, debe guardar esa salida en una variable del mismo nombre que su parámetro de datos de devolución de llamada.

En otras palabras, si tu ejemplo se ve como

d3.csv("data.csv", function(error, data) {

   if(error){console.log("Could not read " + "data.csv");

   /* Do something with `data` here */

});

La versión amigable JSFiddle se vería así:

//d3.csv("data.csv", function(error, data) {

//   if(error){console.log("Could not read " + "data.csv");

var data = d3.csv.parse( d3.select("pre#data").text() );

   /* Do something with `data` here */

//});

Si prefiere tener un ejemplo de trabajo completo que use los métodos de lectura de archivos según lo previsto, existen otras opciones como se menciona en los comentarios. Tributary también permite archivos de datos externos, creo.