在jsfiddle中加载外部csv文件 [英] Loading external csv file in jsfiddle

问题描述

我试图为dc.js示例之一创建一个jsfiddle。我无法使用URL和 d3.csv（）加载外部文件。

I am trying to create a jsfiddle for one of the dc.js examples. I am not able to load an external file using a URL and d3.csv().

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

Can someone please suggest how to load a csv file using d3.csv in jsfiddle.

推荐答案

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

The approach I usually use for CSV data in JSFiddle examples is

a。将数据放在HTML标记结尾的< pre> 块中，通常使用iddata。

a. Put the data in a <pre> block at the end of the HTML mark-up, usually with the id "data".

b。将 pre {display：none;} 添加到CSS。

b. Add pre {display:none;} to the CSS.

c。用 d3.csv.parse（text）调用替换 d3.csv（filename，callback）使用< pre> 块的文本内容作为解析函数的输入。

c. Replace the d3.csv(filename, callback) function call with a d3.csv.parse(text) call, using the text content of the <pre> block as the input to the parse function.

函数不使用回调，它只是返回数据数组，需要将该输出保存在与您的回调数据参数相同名称的变量中。

Because the parse function doesn't use a callback, it just returns the data array, you need to save that output in a variable of the same name as your callback data parameter.

如果你的例子看起来像

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

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

   /* Do something with `data` here */

});

JSFiddle的友好版本如下：

The JSFiddle-friendly version would look like:

//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 */

//});

如果你想拥有一个使用文件读取方法的完整工作示例，其他选项在评论中提到。 支路还允许外部数据文件。

If you would rather have a full working example that uses the file-reading methods as intended, there are other options as mentioned in the comments. Tributary also allows external data files I think.

这篇关于在jsfiddle中加载外部csv文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！