如何转换为D3的JSON格式？

Question

在遵循众多D3示例时，数据通常以flare.json中给出的格式进行格式化：

{
 "name": "flare",
 "children": [
  {
   "name": "analytics",
   "children": [
    {
     "name": "cluster",
     "children": [
      {"name": "AgglomerativeCluster", "size": 3938},
      :

我有一个邻接列表，如下所示：

A1 A2
A2 A3
A2 A4

我想将其转换为以上格式。目前，我正在服务器端执行此操作，但是有没有办法使用d3的功能来实现此目的？我在这里找到了一个，但是这种方法似乎需要修改d3核心库，由于可维护性，我不赞成这样做。有什么建议？

Answer 1

有没有规定的格式，通常可以通过各种访问函数重新定义你的数据（如hierarchy.children）和array.map。但是您引用的格式可能是最方便的树表示形式，因为它可以与默认访问器一起使用。

第一个问题是您打算显示图形还是树。对于图，数据结构是根据节点和链接定义的。对于树，布局的输入是根节点，该根节点可能具有一系列子节点，并且其叶节点具有关联的value。

如果要显示一个 图 ，而您所拥有的只是一个边列表，那么您将要遍历这些边，以生成一个节点数组和一个链接数组。假设您有一个名为“
graph.csv”的文件：

source,target
A1,A2
A2,A3
A2,A4

您可以使用d3.csv加载此文件，然后生成节点和链接的数组：

d3.csv("graph.csv", function(links) {
  var nodesByName = {};

  // Create nodes for each unique source and target.
  links.forEach(function(link) {
    link.source = nodeByName(link.source);
    link.target = nodeByName(link.target);
  });

  // Extract the array of nodes from the map by name.
  var nodes = d3.values(nodeByName);

  function nodeByName(name) {
    return nodesByName[name] || (nodesByName[name] = {name: name});
  }
});

然后，您可以传递这些节点并链接到力的布局以可视化图形：

• http://bl.ocks.org/2949937

如果要生成一 棵树 ，则需要做一些略有不同的数据转换形式，以积累每个父级的子节点。

d3.csv("graph.csv", function(links) {
  var nodesByName = {};

  // Create nodes for each unique source and target.
  links.forEach(function(link) {
    var parent = link.source = nodeByName(link.source),
        child = link.target = nodeByName(link.target);
    if (parent.children) parent.children.push(child);
    else parent.children = [child];
  });

  // Extract the root node.
  var root = links[0].source;

  function nodeByName(name) {
    return nodesByName[name] || (nodesByName[name] = {name: name});
  }
});

像这样：

• http://bl.ocks.org/2949981