如何在JavaScript中为D3建立数据集？

Question

我正在尝试建立这样的图形： 。 它基本上是依赖关系树。 每个节点都有一个作为子元素（在列表中）或具有名称和大小的简单json依赖的元素列表（请参见下面的结构）。 欲了解更多详情，请参阅本

  {
 "name": "flare",
 "children": [
  {
   "name": "analytics",
   "children": [
    {
     "name": "cluster",
     "children": [
      {"name": "AgglomerativeCluster", "size": 3938},
      {"name": "CommunityStructure", "size": 3812},
      {"name": "HierarchicalCluster", "size": 6714},
      {"name": "MergeEdge", "size": 743}
     ]
    },
    {
     "name": "graph",
     "children": [
      {"name": "BetweennessCentrality", "size": 3534},
      {"name": "LinkDistance", "size": 5731},
      {"name": "MaxFlowMinCut", "size": 7840},
      {"name": "ShortestPaths", "size": 5914},
      {"name": "SpanningTree", "size": 3416}
     ]
    },
    {
     "name": "optimization",
     "children": [
      {"name": "AspectRatioBanker", "size": 7074}
     ]
    }
   ]
  },
  ....
  ....
 }

就我而言，我想要具有不同数据集的同一件事。 我的数据在json中看起来像这样：

[{
  "angular-chart.js@1.0.3": {
    "chart.js@2.3.0": {
      "chartjs-color@2.0.0": {
        "chartjs-color-string@0.4.0": {
          "color-name@1.1.1": {}
        },
        "color-convert@0.5.3": {}
      },
      "moment@2.15.2": {}
    },
    "angular@1.5.8": {}
  }
},
{
    "body-parser@1.15.2": {
        "content-type@1.0.2": {},
        "bytes@2.4.0": {},
        "http-errors@1.5.0": {
            "inherits@2.0.1": {},
            "statuses@1.3.0": {},
            "setprototypeof@1.0.1": {}
        },
        "debug@2.2.0": {
            "ms@0.7.1": {}
        },
        "depd@1.1.0": {},
        "on-finished@2.3.0": {
            "ee-first@1.1.1": {}
        },
        "iconv-lite@0.4.13": {},
        "qs@6.2.0": {},
        "raw-body@2.1.7": {
            "unpipe@1.0.0": {},
            "bytes@2.4.0": {},
            "iconv-lite@0.4.13": {}
        },
        "type-is@1.6.13": {
            "mime-types@2.1.12": {
                "mime-db@1.24.0": {}
            },
            "media-typer@0.3.0": {}
        }
    }
}]

如您所见，它只是一系列依赖项。 基本上，每个数组元素都是根节点所依赖的和元素，并具有自己的依赖关系。 例如，根依赖的第一个元素是angular-chart.js@1.0.3 。 这个json只是说：

1. angular-chart.js > (chart.js and angular@1.5.8).
2. char.js > (chartjs-color and moment)
3. chartjs-color-string > (chartjs-color-string and color-convert).
4. chartjs-color-string > color-name.
5. color-name > {}, color-convert > {}.
6. moment > {}
7. angular > {}

并且应该变成这样：

{"name": "angular-chart.js@1.0.3",
"children": [
    {"name": "angular@1.5.8", "size": 1000},
    {"name": "chart.js@2.3.0",
    "children": [
        {"name": "moment@2.15.2", "size": 1000},
        {"name": "chartjs-color@2.0.0",
        "children":[
            {"name": "chartjs-color-string@0.4.0",
            "children":[
                {"name": "color-name@1.1.1", "size": 1000}
                ]
            },
            {"name": "color-convert@0.5.3", "size": 1000}
            ]
        }
        ]
    }
    ]
 }

你能不能给从以下算法：

    {
      "angular-chart.js@1.0.3": {
        "chart.js@2.3.0": {
          "chartjs-color@2.0.0": {
            "chartjs-color-string@0.4.0": {
              "color-name@1.1.1": {}
            },
            "color-convert@0.5.3": {}
          },
          "moment@2.15.2": {}
        },
        "angular@1.5.8": {}
      }
    }

至：

{"name": "angular-chart.js@1.0.3",
"children": [
    {"name": "angular@1.5.8", "size": 1000},
    {"name": "chart.js@2.3.0",
    "children": [
        {"name": "moment@2.15.2", "size": 1000},
        {"name": "chartjs-color@2.0.0",
        "children":[
            {"name": "chartjs-color-string@0.4.0",
            "children":[
                {"name": "color-name@1.1.1", "size": 1000}
                ]
            },
            {"name": "color-convert@0.5.3", "size": 1000}
            ]
        }
        ]
    }
    ]
}

在JavaScript中

Answer 1

您可以使用此递归ES6函数：

 function tree(data) { return Object.keys(data).map( key => Object.keys(data[key]).length ? { name: key, children: tree(data[key]) } : { name: key, size: 1000 } ); } // Sample data var data = { "angular-chart.js@1.0.3": { "chart.js@2.3.0": { "chartjs-color@2.0.0": { "chartjs-color-string@0.4.0": { "color-name@1.1.1": {} }, "color-convert@0.5.3": {} }, "moment@2.15.2": {} }, "angular@1.5.8": {} } }; // conversion var arr = tree(data); // output console.log(arr); 

请注意，返回值的顶级是一个数组。 如果期望输入对象仅具有一个属性，则可以从结果（ arr[0] ）中获取该元素。

结果包含具有两个属性的节点： name属性和children属性或size属性。