0

我正在尝试在JSBIN中重新创建这个d3 示例

d3.csv("bar-data.csv", function(error, data) {
...
})

我正在尝试引用csv 文件，但它似乎确实能够访问 csv 文件：

d3.csv("http://bl.ocks.org/d3noob/raw/8952219/d45ad0a7caf9c499d1a1e975b3760c90f5321072/bar-data.csv", function(error, data) {
...

我已尝试将文件上传到保管箱并使用该链接，但该链接不起作用。

任何人都可以建议我如何让这些 url 到 csv 文件工作。或者提供另一种方式让我尝试重新创建这个例子？我想重新创建它的原因是我可以用其他数据修改和测试它，并且通常用它做更多的事情......

注意另一种选择是尝试 jsfiddle，我会这样做，但我想使用 jsbin。

编辑1

这是使用 csv 文件的保管箱链接的JSFIDDLE 。这是我在 Firefox 中遇到的错误：

 https://www.dropbox.com/s/plpl0yjxze9elpd/bar-data.csv 200 OK 966ms    d3.v3.min.js (line 1)
 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.dropbox.com/s/plpl0yjxze9elpd/bar-data.csv. (Reason: CORS header 'Access-Control-Allow-Origin' missing).
 TypeError: data is undefined

编辑2

一种方法是根本不从 csv 中读取并将其保存在数组中，这需要一段时间才能将其转换为我想要的格式，但我仍然希望能够通过读取.csv 文件。

data = [{"date":"2013-01","value":53},{"date":"2013-02","value":165},{"date":"2013-03","value":269},{"date":"2013-04","value":344},{"date":"2013-05","value":376},{"date":"2013-06","value":410},{"date":"2013-07","value":421},{"date":"2013-08","value":405},{"date":"2013-09","value":376},{"date":"2013-10","value":359},{"date":"2013-11","value":392},{"date":"2013-12","value":433},{"date":"2014-01","value":455},{"date":"2014-02","value":478}]

小提琴JSBIN

4

1 回答 1

1

很难找到某个地方来删除不会受到 CORS 限制的文件。最简单的做法就是下载代码并从文件本地运行它。

如果你真的想在浏览器中完成这一切，Plunker将是一个不错的选择。它类似于 jsfiddle 或 jsbin，但允许您在项目中创建所需的任何类型的文件。所以只需在那里创建一个 csv 文件并将数据粘贴进去。

于 2016-11-29T23:31:23.143 回答