javascript - 如何在 JavaScript 中为 D3 构建数据集？

Question

我正在尝试构建这样的图表: 。它基本上是依赖关系树。每个 Node 都有一个它所依赖的元素列表(在列表中)，或者带有名称和大小的简单 json(请参见下面的结构)。更多详情请参见this

  {
 "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": {}
        }
    }
}]

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

1. angular-chart.js >(chart.js 和 angular@1.5.8)。
2. char.js >(chartjs-颜色和时刻)
3. chartjs-color-string >(chartjs-color-string 和颜色转换)。
4. chartjs-color-string > 颜色名称。
5. 颜色名称 > {}，颜色转换 > {}。
6. 时刻 > {}
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])。

结果包含具有两个属性的 Node :name 属性和 children 属性或 size 属性。