Я пытаюсь создать jsfiddle для одного из примеров dc.js. Я не могу загрузить внешний файл с помощью URL-адреса и d3.csv().
Кто-нибудь может предложить, как загрузить файл csv с помощью d3.csv в jsfiddle.
Загрузка внешнего файла csv в jsfiddle
Ответ 1
Подход, который я обычно использую для CSV-данных в примерах JSFiddle,
а. Поместите данные в блок <pre> в конце разметки HTML, как правило, с идентификационными "данными".
б. Добавьте pre {display:none;} в CSS.
с. Замените вызов функции d3.csv(filename, callback) вызовом d3.csv.parse(text), используя текстовое содержимое блока <pre> в качестве входа в функцию синтаксического анализа.
Поскольку функция parse не использует обратный вызов, она просто возвращает массив данных, вам нужно сохранить этот вывод в переменной с тем же именем, что и ваш параметр данных обратного вызова.
Другими словами, если ваш пример выглядит как
d3.csv("data.csv", function(error, data) {
if(error){console.log("Could not read " + "data.csv");
/* Do something with `data` here */
});
Версия JSFiddle будет выглядеть так:
//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 */
//});
Если вы предпочитаете полный рабочий пример, который использует методы чтения файлов по назначению, есть другие варианты, упомянутые в комментариях. Tributary также позволяет использовать внешние файлы данных.