Загрузка внешнего файла csv в jsfiddle

17

Я пытаюсь создать jsfiddle для одного из примеров dc.js. Я не могу загрузить внешний файл с помощью URL-адреса и d3.csv() .

Кто-нибудь может предложить, как загрузить файл csv, используя d3.csv в jsfiddle.

    
задан Andy897 06.04.2014 в 08:43
источник
  • Я не уверен, что вы можете, но есть альтернатива, такая как Bl.ocks –  user1614080 06.04.2014 в 12:06
  • Плункер - еще один хороший вариант. –  FernOfTheAndes 06.04.2014 в 12:51
  • @ Andy897: Попробуйте Plunker, который вам может понравиться. У меня такая же ситуация, как и у вас, и так выглядит в Plunker –  kyo 24.03.2015 в 18:27

1 ответ

28

Подход, который я обычно использую для CSV-данных в примерах JSFiddle,

а. Поместите данные в блок <pre> в конце разметки HTML, как правило, с идентификаторами «data».

б. Добавьте 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 также позволяет использовать внешние файлы данных.

    
ответ дан AmeliaBR 06.04.2014 в 17:34
источник
  • P.S. Вот пример использования вышеупомянутой техники; это от этого вопросов и ответов. Вот еще один пример, в котором изначально было четыре разных файла данных - все выгружаются в скрипку в виде отдельных блоков <pre>; вы также можете увидеть, что в коде записаны исходные вызовы чтения файлов. Этот пример пришел из этого вопроса и ответа. –  AmeliaBR 06.04.2014 в 17:40
  • Привет, Амелия, Превосходительство к вам за отличный ответ. Похоже, вы активно работаете с d3 и другими дочерними библиотеками, такими как nvd3 и dc. Вот еще одно мое сомнение, если вы можете взглянуть, когда у вас появится шанс. stackoverflow.com/questions/22897142/grouping-charts-in-dc-js ... Спасибо! –  Andy897 06.04.2014 в 19:04
  • Небольшой синтаксический вариант, я заменил: d3.csv ("data.csv", function (error, data) {data.forEach (function (d) {d.date = parseDate (d.date); close = + d.close;}); –  ChrisGuest 01.10.2015 в 06:26
  • с: var data = d3.csv.parse (d3.select ("pre # data"). text ()); data.forEach (function (d) {d.date = parseDate (d.date); d.close = + d.close;}); –  ChrisGuest 01.10.2015 в 06:26
  • Для версии 4 из d3 используйте: d3.csvParse (d3.select («pre # data»). text ()); –  Christian-G 01.11.2016 в 11:27