Question

我正在尝试构建这样的图形：。它基本上是依赖树。每个节点都有一个它依赖的子元素列表（在列表中），或者具有名称和大小的简单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": {}
        }
    }
}]

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

angular-chart.js > (chart.js and angular@1.5.8).
char.js > (chartjs-color and moment)
chartjs-color-string > (chartjs-color-string and color-convert).
chartjs-color-string > color-name.
color-name > {}, color-convert > {}.
moment > {}
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": {}
      }
    }

TO：

{"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属性。

如何在JavaScript中构建D3的数据集？

1 个答案: