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

Question

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

不过，也有在这里我想直接在HTML页面中嵌入CSV两种情况（只有使用小CSV数据）：

• 可以在本地加载的页面（即从文件：/// ），而不需要运行本地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> 

Hidding页面上的原始数据：

#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