如何在这样的示例中了解Mike Bostock示例中json的结构(在使用d3操纵蜂之后):

http://bl.ocks.org/mbostock/3886208

我的目标是使用我自己的JSON对象虚拟数组来实现它,而无需加载csv数据。但是我不知道json的样子。

Mike Bostock的数据处理:

d3.csv("data.csv", function(d, i, columns) {
  for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]];
  d.total = t;
  return d;
}, function(error, data) {
  if (error) throw error;


我已经尝试过将csv保存在本地,并在node.js命令中运行上面的代码,但是没有用。有没有更简单的方法?

最佳答案

在d3的文档中,它显示了如何将CSV解析为对象数组的示例。这是一个示例CSV文件:

Year,Make,Model,Length
1997,Ford,E350,2.34
2000,Mercury,Cougar,2.38


生成的JavaScript数组为:

[
  {"Year": "1997", "Make": "Ford", "Model": "E350", "Length": "2.34"},
  {"Year": "2000", "Make": "Mercury", "Model": "Cougar", "Length": "2.38"}
]


(来自https://github.com/d3/d3-dsv/blob/master/README.md#dsv_parse

这意味着在您的示例中,第一个数据元素将如下所示:

[
  {"State": "AL", "Under 5 Years": "310504","5 to 13 Years": "552339","14 to 17 Years": "259034","18 to 24 Years": "450818","25 to 44 Years": "1231572","45 to 64 Years": "1215966","65 Years and Over": "641667"}
]


或者像这样以更易于阅读的格式:

[
  {
    "State": "AL",
    "Under 5 Years": "310504",
    "5 to 13 Years": "552339",
    "14 to 17 Years": "259034",
    "18 to 24 Years": "450818",
    "25 to 44 Years": "1231572",
    "45 to 64 Years": "1215966",
    "65 Years and Over": "641667"
  }
]


最好的选择是将Bostock的CSV复制到JSON到CSV转换器(this one has worked for me,但还有很多),然后在本地代码中使用JSON。

如果您确实使用了D3 CSV加载功能,则由于跨源请求错误,将很难在没有简单服务器的情况下从本地文件执行此操作。

另外,当您说将其作为node.js命令运行时,我并不完全知道您的意思-我想您可能希望将JavaScript和json对象包含在“ .js”文件中,并将其链接到html文件,或者如果它是一个简单的项目,则仅将javascript内联到html文件中(就像Bostock在链接的视觉效果中一样)

关于javascript - 如何在Mike Bostock的d3.js示例中了解数据结构,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41601119/

10-09 09:08