使用D3.js加载本地数据以进行可视化

Question

我正在开发一个项目,要求我可视化一个相当复杂的数据类型(参见这个较旧的问题).简而言之,我有大量数据可以导出为JSON,CSV或其他任意平面格式,但如果可能的话我更愿意避免使用XML(请参阅上面的链接问题以获取底层数据的详细说明).

我已经开始使用D3进行可视化工作,我编写的布局似乎工作正常,当我用一些非常简单的数据测试它时,我在Javascript中作为数组进行硬编码.我读到D3中关于数据绑定的教程有点令人困惑,因为有些人使用JSON,有些人使用TXT/CSV格式,而有些则使用硬编码数组/矩阵.

在JSON的情况下,我观​​看了一个教程,其中叙述者坚定地建议在Web服务器上托管JSON文件并使用HTTP请求而不是本地文件读取来获取它.我意识到这是由于跨域请求限制,我相信我必须以某种方式解决.在这一点上,我不知道如何继续:

1. D3支持的可视化将在一系列HTML报告中,这些报告是作为我编写的分析工具的结果创建的.分析在用户计算机上完成,HTML报告也在客户端本地创建.

2. 目标用户绝对不是技术娴熟的,因此不能指示他们在他们的计算机上运行Web服务器以便能够通过localhost提供JSON或任何其他类型或资源

为了记录,我已经尝试运行python SimpleHTTPServer模块来试用它,并且一切正常.然后,我尝试对生成的HTML报告中的数据进行硬编码,然后从使用D3的脚本调用JSON对象,

//d3.json("mydata.json", function(json){
d3.json(myjson, function(json){
    nodeData = json.elements;
....
}

失败,因为在这种情况下,我最终发送一个JSON对象,而D3.js期待一个URL.

我该怎么做才能避免/解决这个问题？

Answer 1

D3 有一些很棒的工具用于导入数据和操作数据。过去一直提供 json（有时创建起来很麻烦），我更倾向于提供 csv 并在 javascript/d3 中操作它，但有兴趣看看其他人如何回应您的问题。

这是一个简单的示例，显示 csv 到嵌套 json： https: //gist.github.com/3053667

还有很多用于操作数据的工具： https ://github.com/mbostock/d3/wiki/Arrays

如果你想切片和切块，还有 Crossfilter。看起来很值得掌握，但我正在等待傻瓜指南的问世！ http://square.github.com/crossfilter/