将csv嵌入HTML中以与D3.js一起使用 [英] Embedding csv in HTML for use with D3.js

问题描述

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

In D3.js, one usually loads data from an external csv file. This is very efficient for large data, and avoids changing the code when the data changes.

但是，有两种情况（只使用小csv数据）直接在HTML网页中嵌入csv：

However, there are two situations (only using small csv data) where I want to embed csv directly in an HTML page:

• 可以在本地加载的网页（即从file：///），而不需要运行本地HTTP服务器。


• 一个小jsfiddle示例，用于解释在stackoverflow上使用的D3.js问题。

推荐答案

这是我提出的解决方案，使用 D3.js API 。

This is the solution I have come up with, using the example from the D3.js API.

嵌入csv数据：

<pre id="csvdata">
    Year,Make,Model,Length
    1997,Ford,E350,2.34
    2000,Mercury,Cougar,2.38
</pre>

隐藏页面上的原始数据：

Hidding the raw data on the page:

#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

如果认为这是有缺陷的，或者如果你有一个更优雅的解决方案，很高兴接受你的回答！

If think this is flawed, or if you have a more elegant solution, I will gladly accept your answer!

编辑：在这个小提琴

这篇关于将csv嵌入HTML中以与D3.js一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！