在 D3.js 中,通常从外部 csv 文件加载数据。这对于大数据来说非常高效,并且避免了数据变化时更改代码。
但是,有两种情况(仅使用小型 csv 数据)我想将 csv 直接嵌入到 HTML 页面中:
这是我使用 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
如果认为这是有缺陷的,或者如果您有更优雅的解决方案,我会很乐意接受您的答案!
编辑:在这个小提琴
中查看它的实际效果