在 D3.js 中,通常从外部 csv 文件加载数据。这对于大数据非常有效,并且避免了在数据变化时更改代码。
但是,有两种情况(仅使用小型 csv 数据)我想将 csv 直接嵌入 HTML 页面中:
- 可以在本地加载的页面(即从 file:///),无需运行本地 HTTP 服务器。
- 一个小的 jsfiddle 示例,解释了在 stackoverflow 上使用的 D3.js 问题。
这是我提出的解决方案,使用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
如果认为这是有缺陷的,或者您有更优雅的解决方案,我将很乐意接受您的回答!
编辑:在这个小提琴中看到它的实际效果