问题描述
我试图为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文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!