使用 MVC 将 CSV/TSV 文件传递到 D3答案

【问题标题】：Passing a CSV/TSV file to D3 using MVC使用 MVC 将 CSV/TSV 文件传递到 D3
【发布时间】：2013-12-12 13:56:19
【问题描述】：

我正在阅读http://bost.ocks.org/mike/bar/2/的教程

示例代码（如下）显示了要传递给 D3 函数的数据文件的相对文件名"data.tsv"。但是我需要通过 MVC 控制器传递这个文件。我该怎么做？

d3.tsv("data.tsv", type, function(error, data) {...

任何事情都会有很大帮助，谢谢。

更新：

"data.tsv" and "data.json" 路由失败了。我尝试了两天让 MVC 控制器发送到d3方法的数据正常工作，但我无法正确绑定。

但是我使用jQuery.ajax 从服务器获取数据（json）并且第一次工作。 :)

【问题讨论】：

您能详细说明一下吗？ MVC 控制器是什么意思？数据是来自文件还是动态生成？
如果可能，数据可以动态生成，但如果不可能，它可能来自文件。
好的，所以你在第一个参数中指定生成数据的 URL。
是的，我可以让它调用控制器方法并让该控制器将信息传递回客户端（在 firebug 中查看）。但是 D3 不显示它。
您是否验证了 D3 正确解析它（即查看 error）？数据格式不同吗？

标签： javascript jquery asp.net-mvc csv d3.js

【解决方案1】：

在尝试弄清楚如何将文件（CSV、TSV 或 Json）传递到 d3.js 图表后，我找到了this source。

基本上你需要像这样在你的控制器中创建一个new方法：

[HttpGet]    
public ActionResult GetCSV()
    {
        FileInfo file = new FileInfo(Path.Combine(HostingEnvironment.ApplicationPhysicalPath, @"data.csv"));
        return File(file.Open(FileMode.Open, FileAccess.Read), "text/csv", "data.csv");
    }

在第一行添加正确的路径，所以 f.e.如果您要加载的文件位于项目文件夹的“Content”文件夹中，那么第一行必须是

FileInfo(Path.Combine(HostingEnvironment.ApplicationPhysicalPath, @"Content/data.csv"));

第二行需要包含正确的 MIME 类型（第三个参数）和文件名（第四个参数）。在控制器中指定后，转到视图并添加

d3.csv("@Url.Action("GetCSV")", type, function(error, data) {...

这里有一个 CSV 文件的示例，但对于 TSV 和 Json 的工作方式相同，分别为 d3.tsv(...) 和 d3.json(...)。

【讨论】：

【解决方案2】：

确保您的“data.tsv”文件存储在assets 文件夹中。由于 d3 是一个客户端库，因此必须将数据文件公开以供 d3 访问（并将其放入资产中使其公开）。

这里有一些关于资产的信息：http://sailsjs.org/#!documentation/assets

【讨论】：