Встраивание csv в HTML для использования с D3.js

В D3.js обычно загружаются данные из внешнего CSV файла. Это очень эффективно для больших данных и позволяет избежать изменения кода при изменении данных.

Однако есть две ситуации (только с использованием небольших данных csv), где я хочу встроить csv непосредственно на HTML-страницу:

  • Страница, которая может быть загружена локально (т.е. из файла:///), без необходимости запуска локального HTTP-сервера.
  • Небольшой пример jsfiddle, объясняющий вопрос D3.js для использования в stackoverflow.

Ответы

Ответ 1

Это решение, которое я придумал, используя пример из D3.js API.

Вставка данных csv:

<pre id="csvdata">
    Year,Make,Model,Length
    1997,Ford,E350,2.34
    2000,Mercury,Cougar,2.38
</pre>

Сжатие необработанных данных на странице:

#csvdata {
    display: none;
}

Разбор:

var raw = d3.select("#csvdata").text();
var parsed = d3.csv.parse(raw);

Необязательно, покажите результат:

d3.select("#parsed").text(JSON.stringify(parsed));
// Assuming <div id="parsed"></div> somewhere on the page

Если вы считаете, что это испорчено, или если у вас есть более элегантное решение, я с радостью приму ваш ответ!

EDIT: см. его в действии в эта скрипка