d3.s可折叠力布局修改

Question

有没有办法让这个图表在开始时崩溃？ http://bl.ocks.org/mbostock/1093130

由于我在.json文件中使用相同的名称，因此我无法完成任务。

这是我的例子：http://plnkr.co/edit/vg18Z5APuK1HhxZu3IXj?p=preview

代码：

var width = 600,
    height = 600,
    node,
    link,
    root;

var leafColor = d3.scale.category20();

var force = d3.layout.force()
    .linkDistance(function(d) { return d.target._children ? 80 : 30; })
    .charge(function(d) { return d._children ? -d.size / 100 : -150; })
    .gravity(0.1)
    .size([width, height -160])
    .on("tick", tick);

var vis = d3.select("#chart").append("svg:svg")
.attr("width", width)
.attr("height", height);

function moveChildren(node) {
  if(node.children) {
    node.children.forEach(function(c) { moveChildren(c); });
    node._children = node.children;
    node.children = null;

  }
}

var link = vis.selectAll(".link"),
    node = vis.selectAll(".node");

d3.json("graph.json", function(error, json) {
  root = json;
  root.x = width / 2;
  root.y = height / 2 - 80;
  moveChildren(json);
  update();
});

function update(d) {

  var nodes = flatten(root),
      links = d3.layout.tree().links(nodes);

  // Restart the force layout.
  force
      .nodes(nodes) //.nodes([nodes[0]])
      .links(links)
      .start();

  // Update links.
  link = vis.selectAll("line.link")
  .data(links, function(d) { return d.target.id; });

  // Enter any new links.
  link.enter().insert("line", ".node")
      .attr("class", "link");

  // Exit any old links.
  link.exit().remove();

  // Update nodes.
  node = node.data(nodes, function(d) { return d.id; });

  // ??
  node.transition()
  .attr("r", function(d) { return d.children ? 4.5 : Math.sqrt(d.size) / 10; });

  // Enter any new nodes.
  var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      .on("click", click)
      .call(force.drag)
      .attr("href", function(d) { return d.link; });

  // Exit any old nodes.
  node.exit().remove();

  nodeEnter.append("svg:a")
  .attr("xlink:href", function(d){return d.link;})
  .append("circle")
      .attr("r", function(d) { return Math.sqrt(d.size) / 15 || 2.5; });

  nodeEnter.append("text")
      .attr("dy", "0.35em")
      .text(function(d) { return d.name; });

  node.select("circle")
      .style("fill", color);
}

function tick(d) {
  // sets the bounding box
  node.attr("cx", function(d) { return d.x = Math.max(15, Math.min(width - 15, d.x)); })
  .attr("cy", function(d) { return d.y = Math.max(15, Math.min(height - 15, d.y)); });

  link.attr("x1", function(d) { return d.source.x; })
  .attr("y1", function(d) { return d.source.y; })
  .attr("x2", function(d) { return d.target.x; })
  .attr("y2", function(d) { return d.target.y; });

  node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}

function color(d) {
   console.log(d)
   return leafColor(d.parentName)
}

function neighboring(a, b) {
  return a.index == b.index || linkedByIndex[a.index + "," + b.index];
}

// Toggle children on click.
function click(d) {
  if (d3.event.defaultPrevented) return; // ignore drag
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update();

  // marks the clicked node
  d3.selectAll(".link").transition().duration(500)
  .style("stroke-width", function(o) {
    return o.target === d || o.target === d ? 3 : 1;
  }).style("stroke", function(o) {
    return o.target === d || o.target === d ? "red" : "grey";
  });

  d3.selectAll(".node").transition().duration(500)
    .style("stroke-width", function(o) {
       return neighboring(d, o) ? 1 : 0;
    }).style("stroke", function(o) {
       return neighboring(d, o) ? "red" : "white";
    });
}

// Returns a list of all nodes under the root.
function flatten(root) {
  var nodes = [], i = 0;

  function recurse(node) {
    if (node.children) node.children.forEach(recurse);
    if (!node.id) node.id = ++i;
    nodes.push(node);
}

  recurse(root);
  return nodes;
}

JSON：

    {
 "name": "AR1", "size": 100000,
 "parentName": "none",
 "link": "ar1.html",
 "children": [
  {
    "name": "LA", 
    "size": 50000, 
    "parentName": "A", 
    "link": "la.html",
    "children": [
      {"name": "AR", "parentName": "A", "size": 50000,
      "children": [
      {"name": "RE", "parentName": "A", "size": 50000,
        "children": [
          {"name": "ME", "parentName": "A", "size": 50000}
        ]
      },
      {"name": "ME", "parentName": "A", "size": 50000,
        "children": [
          {"name": "RE", "parentName": "A", "size": 50000}
        ]
      }
     ]
      },
      {"name": "RE", "parentName": "A", "size": 50000,
      "children": [
      {"name": "AR", "parentName": "A", "size": 50000,
        "children": [
          {"name": "ME", "parentName": "A", "size": 50000}
        ]
      },
      {"name": "ME", "parentName": "A", "size": 50000,
        "children": [
          {"name": "AR", "parentName": "A", "size": 50000}
        ]
      }
     ]
      },
      {"name": "ME", "parentName": "A", "size": 50000,
      "children": [
      {"name": "AR", "parentName": "A", "size": 50000,
        "children": [
          {"name": "RE", "parentName": "A", "size": 50000}
        ]
      },
      {"name": "RE", "parentName": "A", "size": 50000,
        "children": [
          {"name": "AR", "parentName": "A", "size": 50000}
        ]
      }
     ]
      }
     ]
  },
  {
    "name": "AR", 
    "size": 50000, 
    "parentName": "B", 
    "link": "ar.html",
    "children": [
      {"name": "LA", "parentName": "B", "size":50000,
      "children": [
      {"name": "RE", "parentName": "B", "size": 50000,
        "children": [
          {"name": "ME", "parentName": "B", "size": 50000}
        ]
      },
      {"name": "ME", "parentName": "B", "size": 50000,
        "children": [
          {"name": "RE", "parentName": "B", "size": 50000}
        ]
      }
     ]
      },
      {"name": "RE", "parentName": "B", "size": 50000,
      "children": [
      {"name": "LA", "parentName": "B", "size": 50000,
        "children": [
          {"name": "ME", "parentName": "B", "size": 50000}
        ]
      },
      {"name": "ME", "parentName": "B", "size": 50000,
        "children": [
          {"name": "LA", "parentName": "B", "size": 50000}
        ]
      }
     ]
      },
      {"name": "ME", "parentName": "B", "size": 50000,
      "children": [
      {"name": "LA", "parentName": "B", "size": 50000,
        "children": [
          {"name": "RE", "parentName": "B", "size": 50000}
        ]
      },
      {"name": "RE", "parentName": "B", "size": 50000,
        "children": [
          {"name": "LA", "parentName": "B", "size": 50000}
        ]
      }
     ]
      }
     ]
  },
  {
    "name": "RE", 
    "size": 50000, 
    "parentName": "C", 
    "link": "re.html",
    "children": [
      {"name": "LA", "parentName": "C", "size": 50000,
      "children": [
      {"name": "AR", "parentName": "C", "size": 50000,
        "children": [
          {"name": "ME", "parentName": "C", "size": 50000}
        ]
      },
      {"name": "ME", "parentName": "C", "size": 50000,
        "children": [
          {"name": "AR", "parentName": "C", "size": 50000}
        ]
      }
     ]
      },
      {"name": "AR", "parentName": "C", "size": 50000,
      "children": [
      {"name": "LA", "parentName": "C", "size": 50000,
        "children": [
          {"name": "ME", "parentName": "C", "size": 50000}
        ]
      },
      {"name": "ME", "parentName": "C", "size": 50000,
        "children": [
          {"name": "LA", "parentName": "C", "size": 50000}
        ]
      }
     ]
      },
      {"name": "ME", "parentName": "C", "size": 50000,
      "children": [
      {"name": "LA", "parentName": "C", "size": 50000,
        "children": [
          {"name": "AR", "parentName": "C", "size": 50000}
        ]
      },
      {"name": "AR", "parentName": "C", "size": 50000,
        "children": [
          {"name": "LA", "parentName": "C", "size": 50000}
        ]
      }
     ]
      }
     ]
  },
  {
    "name": "ME", 
    "size": 50000, 
    "parentName": "D", 
    "link": "me.html",
    "children": [
      {"name": "LA", "parentName": "D", "size": 50000,
      "children": [
      {"name": "AR", "parentName": "D", "size": 50000,
        "children": [
          {"name": "RE", "parentName": "D", "size": 50000}
        ]
      },
      {"name": "RE", "parentName": "D", "size": 50000,
        "children": [
          {"name": "AR", "parentName": "D", "size": 50000}
        ]
      }
     ]
      },
      {"name": "AR", "parentName": "D", "size": 50000,
      "children": [
      {"name": "LA", "parentName": "D", "size": 50000,
        "children": [
          {"name": "RE", "parentName": "D", "size": 50000}
        ]
      },
      {"name": "RE", "parentName": "D", "size": 50000,
        "children": [
          {"name": "LA", "parentName": "D", "size": 50000}
        ]
      }
     ]
      },
      {"name": "RE", "parentName": "D", "size": 50000,
      "children": [
      {"name": "LA", "parentName": "D", "size": 50000,
        "children": [
          {"name": "AR", "parentName": "D", "size": 50000}
        ]
      },
      {"name": "AR", "parentName": "D", "size": 50000,
        "children": [
          {"name": "LA", "parentName": "D", "size": 50000}
        ]
      }
     ]
      }
     ]
  }
 ]
}

我已经获得了部分帮助：D3.js Collapsible Force Layout, collapsed by default

然而，它似乎相当复杂，并且在具有相同的节点名称时不起作用。

我使用了这段代码：

function moveChildren(node) {
if(node.children) {
    node.children.forEach(function(c) { moveChildren(c); });
    node._children = node.children;
    node.children = null;
}
}

moveChildren(json);

如此处所示：d3.js How to make all the nodes collapsed in Collapsible indented Tree

图表已损坏。我在这个不起作用的forim上经历了许多其他解决方案，例如： d3.js collapsible force layout with all the nodes collapsed

How can I start with all the nodes collapsed in d3js?

http://bl.ocks.org/david4096/6168323

没有任何帮助。任何建议表示赞赏。谢谢！