Question

我想在此示例中使用csv文件而不是json文件：

https://bl.ocks.org/mbostock/4339083

是否有加载csv而不是json文件的想法？

Answer 1

这里的问题比看起来更复杂，我建议你将数据文件保留为JSON。原因是：您问题中的JSON文件包含嵌套数据。

以下是解释：

显然，加载CSV文件和加载JSON文件之间的唯一区别是请求功能：

d3.json("data.json", function(data){
    //code here
)}

...对于JSON和：

d3.csv("data.csv", function(data){
    //code here
)}

...对于CSV。

但还有更多。除了d3.csv接受访问者（行）功能而d3.json不接受，d3.json加载数据，因为它。另一方面，d3.csv根据列解析文件，创建一个对象数组。

因此，如果你有这个CSV：

city,population,area
New York,3400,210
Melbourne,1200,350
Tokyo,5200,125
Paris,800,70

...它将被解析为这个数组：

[{
    "city": "New York",
    "population": "3400",
    "area": "210"
}, {
    "city": "Melbourne",
    "population": "1200",
    "area": "350"
}, {
    "city": "Tokyo",
    "population": "5200",
    "area": "125"
}, {
    "city": "Paris",
    "population": "800",
    "area": "70"
}]

问题就出现了：正如您所看到的，d3.csv创建的数组中没有嵌套数据。所有对象都在数组中并排。

但是，您链接的Bostock代码中的数据对象有所不同：

{
 "name": "flare",
 "children": [
  {
   "name": "analytics",
   "children": [
    {
     "name": "cluster",
     "children": [
      {"name": "AgglomerativeCluster", "size": 3938},
      {"name": "CommunityStructure", "size": 3812},
      //...

如您所见，对象内的对象内部有数组......

因此，要在您的问题中重新创建嵌套的JSON，您必须创建一个额外的列，指定谁是谁的父级以及谁是谁的父级：

name,value,parentOf
foo,42,bar
bar,53,baz
...

然后，在解析此CSV之后，您必须使用stratify() 对其进行分层：

var nestedData = d3.stratify() .id(function(d) { return d.name; }) .parentId(function(d) { return d.parentOf; }) (data);

如您所见，这些步骤很复杂。

因此，作为一般规则：如果您将数据嵌套为JSON文件，只需使用d3.json，它会按原样加载数据。

Answer 2

您可以使用d3.csv()代替d3.json()。请参阅D3's documentation。

在d3.js中使用csv文件而不是json文件

2 个答案: