在 jsfiddle 中加载外部 csv 文件答案

【问题标题】：Loading external csv file in jsfiddle在 jsfiddle 中加载外部 csv 文件
【发布时间】：2014-04-06 06:43:08
【问题描述】：

我正在尝试为 dc.js 示例之一创建一个 jsfiddle。我无法使用 URL 和 d3.csv() 加载外部文件。

有人可以建议如何在 jsfiddle 中使用 d3.csv 加载 csv 文件。

【问题讨论】：

我不确定你是否可以，但有其他选择，例如Bl.ocks
Plunker 是另一个不错的选择。
@Andy897 ：试试你可能喜欢的 Plunker。我的情况和你一样，Plunker中是这样的

标签： d3.js jsfiddle dc.js

【解决方案1】：

我通常在 JSFiddle 示例中用于 CSV 数据的方法是

一个。将数据放在 HTML 标记末尾的 <pre> 块中，通常使用 id “数据”。

b.在 CSS 中添加 pre {display:none;}。

c。将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 */

//});

如果您希望有一个按预期使用文件读取方法的完整工作示例，那么还有其他选项，如 cmets.xml 中所述。 Tributary 我认为也允许外部数据文件。

【讨论】：

P.S. Here's an example using the above technique;来自this Q&A。 Here's another example，最初有四个不同的数据文件——所有文件都作为单独的 <pre> 块插入小提琴；您还可以看到代码中注释掉的原始文件读取调用。该示例来自this Q&A。
嗨，Amelia，感谢您的出色回复。似乎您正在积极使用 d3 和其他子库，如 nvd3 和 dc。这是我的另一个疑问，如果您有机会请看一下。 stackoverflow.com/questions/22897142/grouping-charts-in-dc-js ...谢谢！
一个轻微的语法变体，我替换为： d3.csv("data.csv", function(error, data) { data.forEach(function(d) { d.date = parseDate(d.日期）；d.close = +d.close；}）；
with: var data = d3.csv.parse(d3.select("pre#data").text()); data.forEach(function(d) { d.date = parseDate(d.date); d.close = +d.close; });
对于 d3 的第 4 版，请使用：d3.csvParse(d3.select("pre#data").text());