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

Question

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

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

可以在本地(即从 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

如果认为这是有缺陷的，或者如果您有更优雅的解决方案，我将很乐意接受您的回答!

编辑:在 this fiddle 中查看它的实际效果