在HTML中嵌入csv以与D3.js一起使用

Question

在D3.js中,通常从外部csv文件加载数据.这对于大数据非常有效,并且避免在数据更改时更改代码.

但是,有两种情况(仅使用小型csv数据)我想直接在HTML页面中嵌入csv:

• 可以在本地加载的页面(即来自file:///),无需运行本地HTTP服务器.
• 一个小的jsfiddle示例,解释了在stackoverflow上使用的D3.js问题.

Answer 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

如果认为这是有缺陷的,或者如果你有一个更优雅的解决方案,我会很乐意接受你的答案!

编辑:在这个小提琴中看到它的行动