title: d3.js Tree Layout - Cross Links
body: <p>I created an interactive force-directed tree of related objects with d3. The nodes and links are created using the d3 tree layout.</p>
  
  <p>The data structure is as follows:</p>
  
  <pre><code>{
    "name": "node name",
    "id": 1,
    "children": [
      {
        "name": "child node name",
        "id": 2
      },
      {
        "name": "child node name",
        "id": 3
      },
      ...
    ]
  },
  ...
  </code></pre>
  
  <p>The nodes/links are created the following way:</p>
  
  <pre><code>var nodes = flatten(rootNode);
  var links = d3.layout.tree().links(nodes);
  </code></pre>
  
  <p>To enable bidirectional traversal of the tree, I recursively walk down the tree from every newly created node and add parent references to all nodes.</p>
  
  <p>It is possible to extend the tree by clicking on a leaf node. Then data is loaded via AJAX and the tree is updated.</p>
  
  <p>The problem with this is that objects with the same ID/Name might occur multiple times in the tree. Is there a way to cleanly merge all duplicate nodes (which would convert the tree into a graph due to cross links) from the JavaScript code?</p>
  
  <p><strong>Edit:</strong> Maybe the only way to do this would be to walk down the entire tree and re-link all links that point to the duplicate... Although I think that this could slow the script down considerably...</p>