readme.md

Reuseable D3 MindMap

Trying to follow the paradigm setup in "Towards Reusable Charts" (http://bost.ocks.org/mike/chart/) and create a reuseable MindMap (left/right tree) type view.

Everything implemented, can override node's with custom nodes if you choose, add nodes to the graph, remove nodes from the graph, swap nodes around. Could be used to create a nice online bracket chart as well.

Thanks to Jason Davies for pointing out my typo on idx's scope.

computermap.mm

<map version="1.0.1">
<!-- To view this file, download free mind mapping software FreeMind from http://freemind.sourceforge.net -->
<node CREATED="1485636465327" ID="ID_788553103" MODIFIED="1485636497372" TEXT="The Basics of Computing">
<node CREATED="1241638982000" ID="Freemind_Link_1107948616" MODIFIED="1242279309312" POSITION="right" TEXT="What is a Computer?"/>
<node CREATED="1242279311234" ID="Freemind_Link_534513767" MODIFIED="1242279312171" POSITION="right" TEXT="What is a Personal Computer?"/>
<node CREATED="1241650392906" ID="Freemind_Link_203113429" MODIFIED="1241650393937" POSITION="right" TEXT="The Components of a Personal Computer">
<node CREATED="1241731014093" ID="Freemind_Link_1816054449" MODIFIED="1241731023093" TEXT="Controlling a Computer">
<node CREATED="1241731024109" ID="Freemind_Link_1003207078" MODIFIED="1241731027109" TEXT="The Keyboard">
<node CREATED="1242084788546" ID="Freemind_Link_1087585515" MODIFIED="1242084791343" TEXT="Modifier Keys">
<node CREATED="1242084795312" ID="Freemind_Link_67691802" MODIFIED="1242084796140" TEXT="Alt"/>
<node CREATED="1242084796921" ID="Freemind_Link_1886809716" MODIFIED="1242084799625" TEXT="Shift"/>
<node CREATED="1242084800312" ID="Freemind_Link_68276160" MODIFIED="1242084801656" TEXT="Control"/>
<node CREATED="1242084802484" ID="Freemind_Link_1225386361" MODIFIED="1242084805031" TEXT="Windows"/>
<node CREATED="1242084805750" ID="Freemind_Link_1014887711" MODIFIED="1242084808890" TEXT="Option"/>
<node CREATED="1242084809625" ID="Freemind_Link_1554854463" MODIFIED="1242084812796" TEXT="&quot;Meta&quot;"/>
</node>
<node CREATED="1242083092171" FOLDED="true" ID="Freemind_Link_455302016" MODIFIED="1242084944062" TEXT="Keyboard Shortcuts">
<node CREATED="1242084944703" ID="Freemind_Link_1538411918" MODIFIED="1242084945765" TEXT="Common ">
<node CREATED="1242083119250" ID="Freemind_Link_1525357365" MODIFIED="1242083120515" TEXT="Reboot"/>
<node CREATED="1242083075171" ID="Freemind_Link_1215635976" MODIFIED="1242083077578" TEXT="Copy and Paste"/>
</node>
<node CREATED="1242083130593" FOLDED="true" ID="Freemind_Link_1765304195" MODIFIED="1242084965359" TEXT="Windows">
<node CREATED="1242083147468" FOLDED="true" ID="Freemind_Link_1008571403" MODIFIED="1242083155000" TEXT="Switch User">
<node CREATED="1242084771046" ID="Freemind_Link_975354349" MODIFIED="1242084773515" TEXT="Windows+L"/>
</node>
<node CREATED="1242083162515" FOLDED="true" ID="Freemind_Link_48576074" MODIFIED="1242083166484" TEXT="Task Manager">
<node CREATED="1242084776984" ID="Freemind_Link_1653151731" MODIFIED="1242084780843" TEXT="Control+Shift+Alt"/>
</node>
<node CREATED="1242083170546" FOLDED="true" ID="Freemind_Link_1484693715" MODIFIED="1242083172328" TEXT="Explorer">
<node CREATED="1242085038468" ID="Freemind_Link_562757206" MODIFIED="1242085040375" TEXT="WIndows+E"/>
</node>
<node CREATED="1242083181046" FOLDED="true" ID="Freemind_Link_782573827" MODIFIED="1242083185250" TEXT="System Properties">
<node CREATED="1242085041062" ID="Freemind_Link_143093866" MODIFIED="1242085044828" TEXT="Windows+Pause"/>
</node>
<node CREATED="1242085047375" FOLDED="true" ID="Freemind_Link_1530145908" MODIFIED="1242085050234" TEXT="Show Desktop">
<node CREATED="1242085050578" ID="Freemind_Link_58238784" MODIFIED="1242085052953" TEXT="Windows+D"/>
</node>
<node CREATED="1242085077671" FOLDED="true" ID="Freemind_Link_1269935829" MODIFIED="1242085081671" TEXT="Show Start Bar">
<node CREATED="1242085082250" ID="Freemind_Link_681746495" MODIFIED="1242085084375" TEXT="Windows+B"/>
</node>
</node>
<node CREATED="1242083133859" ID="Freemind_Link_1695714732" MODIFIED="1242084976687" TEXT="Mac OS X"/>
<node CREATED="1242083139875" ID="Freemind_Link_606477073" MODIFIED="1242084974046" TEXT="Linux">
<node CREATED="1242084992906" ID="Freemind_Link_514906000" MODIFIED="1242084994171" TEXT="Console"/>
<node CREATED="1242084996000" ID="Freemind_Link_204563552" MODIFIED="1242084997031" TEXT="X11"/>
</node>
</node>
</node>
<node CREATED="1241731028312" ID="Freemind_Link_171228687" MODIFIED="1485636554067" TEXT="The Mouse">
<node CREATED="1242082535890" ID="Freemind_Link_347538418" MODIFIED="1242082538828" TEXT="Multi-touch"/>
<node CREATED="1242082539484" ID="Freemind_Link_1906190385" MODIFIED="1242082541375" TEXT="Mouse Gestures"/>
<node CREATED="1242082976265" ID="Freemind_Link_963433960" MODIFIED="1485636555266" TEXT="Buttons">
<node CREATED="1242082465468" ID="Freemind_Link_1602337" MODIFIED="1242083002703" TEXT="Right"/>
<node CREATED="1242082528406" ID="Freemind_Link_94534523" MODIFIED="1242083004125" TEXT="Left"/>
<node CREATED="1242082531734" ID="Freemind_Link_22064766" MODIFIED="1242083005703" TEXT="Middle"/>
</node>
<node CREATED="1242083047875" FOLDED="true" ID="Freemind_Link_1605153789" MODIFIED="1242083055765" TEXT="Desktop Interaction">
<node CREATED="1242083058640" ID="Freemind_Link_1872415950" MODIFIED="1242083067187" TEXT="Dragging and Dropping"/>
<node CREATED="1242083067859" ID="Freemind_Link_1248585193" MODIFIED="1242083069531" TEXT="Selecting"/>
<node CREATED="1242088139140" ID="Freemind_Link_544246088" MODIFIED="1242088141531" TEXT="Context Menus"/>
</node>
</node>
<node CREATED="1241826134562" ID="Freemind_Link_1146797624" MODIFIED="1241826136859" TEXT="The Web Cam"/>
</node>
<node CREATED="1241826138640" ID="Freemind_Link_1487788840" MODIFIED="1485636509328" TEXT="Storage Interfaces">
<node CREATED="1241826189296" ID="Freemind_Link_1493720610" MODIFIED="1241826194000" TEXT="CD-Rom"/>
<node CREATED="1241826195000" ID="Freemind_Link_1467192949" MODIFIED="1241826198656" TEXT="DVD-Rom"/>
<node CREATED="1241826199859" ID="Freemind_Link_1791778153" MODIFIED="1241826203593" TEXT="SD Card"/>
<node CREATED="1241826204453" ID="Freemind_Link_1142310477" MODIFIED="1241826207656" TEXT="Floppy Disk"/>
</node>
<node CREATED="1241826148328" ID="Freemind_Link_1568061044" MODIFIED="1485636510334" TEXT="Network Interfaces">
<node CREATED="1241826212375" ID="Freemind_Link_1682568928" MODIFIED="1241826213437" TEXT="DSL"/>
<node CREATED="1241826215062" ID="Freemind_Link_85123191" MODIFIED="1241826216265" TEXT="Cable"/>
<node CREATED="1241826217187" ID="Freemind_Link_1163768031" MODIFIED="1241826220406" TEXT="Ethernet"/>
<node CREATED="1241826221546" ID="Freemind_Link_718685173" MODIFIED="1241826225593" TEXT="Wireless"/>
</node>
<node CREATED="1241834030322" ID="Freemind_Link_580619723" MODIFIED="1485636511435" TEXT="Displays">
<node CREATED="1242088103218" ID="Freemind_Link_1134576459" MODIFIED="1242088104234" TEXT="LCD"/>
<node CREATED="1242088105218" ID="Freemind_Link_374916178" MODIFIED="1242088106296" TEXT="CRT"/>
</node>
<node CREATED="1241834044244" ID="Freemind_Link_1269176354" MODIFIED="1241834046307" TEXT="Printers"/>
</node>
<node CREATED="1241650416375" ID="Freemind_Link_1001975782" MODIFIED="1485636505446" POSITION="right" TEXT="The Process of Starting Up">
<node CREATED="1241826158843" ID="Freemind_Link_95787357" MODIFIED="1241826161640" TEXT="The BIOS"/>
<node CREATED="1241826153156" ID="Freemind_Link_1241987907" MODIFIED="1241826156218" TEXT="The POST Process"/>
<node CREATED="1241826165968" ID="Freemind_Link_774026572" MODIFIED="1241826168375" TEXT="The Boot Loader"/>
<node CREATED="1241826170328" ID="Freemind_Link_1633973153" MODIFIED="1485636507520" TEXT="The Operating System">
<node CREATED="1241827010031" ID="Freemind_Link_1210092147" MODIFIED="1241827032046" TEXT="Apple Mac OS"/>
<node CREATED="1241827017140" ID="Freemind_Link_1428352238" MODIFIED="1241827021328" TEXT="Microsoft Windows"/>
<node CREATED="1241827022515" ID="Freemind_Link_1746161036" MODIFIED="1241827025687" TEXT="Linux"/>
<node CREATED="1242085024343" ID="Freemind_Link_11873170" MODIFIED="1242085025734" TEXT="Others"/>
</node>
</node>
<node CREATED="1241650422796" ID="Freemind_Link_453640323" MODIFIED="1241650423812" POSITION="right" TEXT="The Graphical User Interface">
<node CREATED="1241826119140" ID="Freemind_Link_1589461438" MODIFIED="1241826121609" TEXT="The Desktop">
<node CREATED="1241826122515" ID="Freemind_Link_1811807859" MODIFIED="1241826126921" TEXT="Desktop Management"/>
<node CREATED="1242082157031" ID="Freemind_Link_1313529769" MODIFIED="1242082162171" TEXT="The Desktop Area"/>
<node CREATED="1242082163125" ID="Freemind_Link_216748129" MODIFIED="1242082166453" TEXT="The Start Menu"/>
<node CREATED="1242082167390" ID="Freemind_Link_458628583" MODIFIED="1485636551343" TEXT="The Notification Area">
<node CREATED="1242252857406" ID="Freemind_Link_1647222963" MODIFIED="1242252863125" TEXT="Adjusting Volume Properties"/>
<node CREATED="1242252869656" ID="Freemind_Link_424565957" MODIFIED="1242252876000" TEXT="Adjusting the Time and Date"/>
</node>
<node CREATED="1242082171781" ID="Freemind_Link_1071208793" MODIFIED="1485636550210" TEXT="Interacting With Controls or Widgets">
<node CREATED="1242082302546" ID="Freemind_Link_1576974282" MODIFIED="1242082304656" TEXT="Drop Down Boxes"/>
<node CREATED="1242082823578" ID="Freemind_Link_622101780" MODIFIED="1242082825796" TEXT="Check Boxes"/>
<node CREATED="1242082828234" ID="Freemind_Link_786520958" MODIFIED="1242082830312" TEXT="Radio Buttons"/>
<node CREATED="1242082833484" ID="Freemind_Link_40968051" MODIFIED="1242082837671" TEXT="Text Boxes"/>
<node CREATED="1242082852281" ID="Freemind_Link_1731597295" MODIFIED="1242082855078" TEXT="Dialog Boxes"/>
<node CREATED="1242082910359" ID="Freemind_Link_89517990" MODIFIED="1242082912250" TEXT="Scroll Bar"/>
<node CREATED="1242082929015" ID="Freemind_Link_685396350" MODIFIED="1242082931968" TEXT="Balloon Help"/>
<node CREATED="1242082936328" ID="Freemind_Link_1723889247" MODIFIED="1242082937359" TEXT="Icon"/>
</node>
<node CREATED="1242088116937" ID="Freemind_Link_291204694" MODIFIED="1485636549011" TEXT="Desktop Resolution">
<node CREATED="1242088167093" ID="Freemind_Link_1723043660" MODIFIED="1242088174218" TEXT="Virtual Resolutions"/>
</node>
<node CREATED="1242088121156" ID="Freemind_Link_603360677" MODIFIED="1242088123046" TEXT="Desktop Icons"/>
<node CREATED="1242088123890" ID="Freemind_Link_1514858973" MODIFIED="1242088128359" TEXT="Active Desktop"/>
<node CREATED="1242279404312" ID="Freemind_Link_1610499619" MODIFIED="1242279408937" TEXT="Application Focus"/>
<node CREATED="1242279412812" ID="Freemind_Link_1361981174" MODIFIED="1242279417515" TEXT="Customizing the Desktop"/>
</node>
</node>
<node CREATED="1241829998625" ID="Freemind_Link_1459123377" MODIFIED="1241830002656" POSITION="right" TEXT="The Internet">
<node CREATED="1241830003171" ID="Freemind_Link_801888079" MODIFIED="1241830005656" TEXT="Web Browsers">
<node CREATED="1241830006390" ID="Freemind_Link_816484839" MODIFIED="1241830351171" TEXT="SRWare Iron"/>
<node CREATED="1241830012875" ID="Freemind_Link_320932813" MODIFIED="1241830015875" TEXT="Google Chromium"/>
<node CREATED="1241830322843" ID="Freemind_Link_1321315631" MODIFIED="1241830326312" TEXT="Internet Explorer"/>
<node CREATED="1241830327156" ID="Freemind_Link_291410493" MODIFIED="1241830338171" TEXT="Mozilla Firefox"/>
<node CREATED="1241830339218" ID="Freemind_Link_800069806" MODIFIED="1241830346750" TEXT="Apple Safari"/>
</node>
<node CREATED="1242101280683" ID="Freemind_Link_1435684699" MODIFIED="1242101286277" TEXT="E-Mail"/>
</node>
<node CREATED="1242155395313" ID="Freemind_Link_734535874" MODIFIED="1242155559905" POSITION="right" TEXT="The File System">
<node CREATED="1242155547514" ID="Freemind_Link_1093661998" MODIFIED="1242155569545" TEXT="The File System Hierarchy">
<node CREATED="1242155596904" ID="Freemind_Link_1536634551" MODIFIED="1485636546773" TEXT="The Root Directory or Drive">
<node CREATED="1242252989187" ID="Freemind_Link_294916192" MODIFIED="1242252995515" TEXT="The C Drive"/>
</node>
<node CREATED="1242155606701" ID="Freemind_Link_176434313" MODIFIED="1485636545574" TEXT="User Data Directories">
<node CREATED="1242252975875" ID="Freemind_Link_952340349" MODIFIED="1242252981296" TEXT="The Desktop Folder"/>
<node CREATED="1242252982078" ID="Freemind_Link_1087971974" MODIFIED="1242252987109" TEXT="The Documents Folder"/>
</node>
<node CREATED="1242155614060" ID="Freemind_Link_1809159724" MODIFIED="1242155617592" TEXT="System Directories"/>
</node>
<node CREATED="1242279389406" ID="Freemind_Link_1332443891" MODIFIED="1485636517894" TEXT="File Naming">
<node CREATED="1242279392343" ID="Freemind_Link_1866259761" MODIFIED="1242279395187" TEXT="File Extensions"/>
</node>
</node>
<node CREATED="1242252914218" ID="Freemind_Link_1010928428" MODIFIED="1485636536894" POSITION="right" TEXT="Installing Operating Systems">
<node CREATED="1242252918421" ID="Freemind_Link_964750878" MODIFIED="1485636522438" TEXT="Windows">
<node CREATED="1242252936593" ID="Freemind_Link_599748221" MODIFIED="1242252937265" TEXT="XP"/>
<node CREATED="1242252938250" ID="Freemind_Link_253514738" MODIFIED="1242252939203" TEXT="Vista"/>
<node CREATED="1242252939953" ID="Freemind_Link_20142988" MODIFIED="1242252944625" TEXT="7"/>
</node>
<node CREATED="1242252920546" ID="Freemind_Link_1788128220" MODIFIED="1485636521013" TEXT="Linux">
<node CREATED="1242252927140" ID="Freemind_Link_35317520" MODIFIED="1242252929421" TEXT="Knoppix"/>
<node CREATED="1242252930296" ID="Freemind_Link_934012300" MODIFIED="1242252932609" TEXT="Ubuntu"/>
<node CREATED="1242252933734" ID="Freemind_Link_1726115939" MODIFIED="1242252934875" TEXT="Debian"/>
</node>
<node CREATED="1242252923125" ID="Freemind_Link_586312172" MODIFIED="1485636520158" TEXT="Mac OS">
<node CREATED="1242252948500" ID="Freemind_Link_628251725" MODIFIED="1242252951187" TEXT="From Flash"/>
<node CREATED="1242252952171" ID="Freemind_Link_118936111" MODIFIED="1242252954359" TEXT="OSx86"/>
</node>
<node CREATED="1485636527831" ID="ID_1086460657" MODIFIED="1485636530783" TEXT="IOS"/>
<node CREATED="1485636536895" ID="ID_201673040" MODIFIED="1485636539619" TEXT="Android"/>
</node>
</node>
</map>

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    <style type="text/css">
      .node circle {
        cursor: pointer;
        fill: #fff;
        stroke: steelblue;
        stroke-width: 1.5px;
      }

      .node text {
        font-size: 11px;
      }

      path.link {
        fill: none;
        stroke: #ccc;
        stroke-width: 1.5px;
      }
      
      .node.selected circle {
        fill: green;
      }
    </style>
  </head>
  <body>
    <div id="body">
      <div id="toolbar">
        <button onclick="pushTopToBottom(); return false;">Push top to bottom on right</button>
        <button onclick="addNodes(); return false;">Add Nodes</button>
        <button onclick="swapLeftRight(); return false;">Swap left and right</button>
        <button onclick="moveNode('left', 'right'); return false;">Move left to right</button>
        <button onclick="moveNode('right', 'left'); return false;">Move right to left</button>
      </div>
      <svg id="chart"></svg>
    </div>
    <script type="text/javascript" src="mindmap.js"></script>
    <script type="text/javascript">
      var getDims = function(){
        var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth,y=w.innerHeight||e.clientHeight||g.clientHeight;
        return {width: x, height: y};
      };
      var dims = getDims();
      var chart = MindMap()
        .width(dims.width)
        .height(dims.height-10)
        .text(function(d){
          return d.name || d.text;
        })
        .click(function(d){
          console.log(d._id);
          // Find previously selected, unselect
          d3.select(".selected").classed("selected", false);
          // Select current item
          d3.select(this).classed("selected", true);
        })
        ;
      
      var loadJSON = function(fileName){
        d3.json("/data/"+fileName, function(json) {
          var i=0, l=json.children.length;
          var root = json;
          
          json.left = [];
          json.right = [];
          for(; i<l; i++){
            if(i%2){
              json.left.push(json.children[i]);
              json.children[i].position = 'left';
            }else{
              json.right.push(json.children[i]);
              json.children[i].position = 'right';
            }
          }

          update(root);
        });
      };
      
      var loadFreeMind = function(fileName){
        MindMap.loadFreeMind('data/'+fileName, function(err, data){
          update(data);
        });
      };
      
      var update = function(data){
        window.data = data;
        d3.select('#chart')
          .datum(data)
          .call(chart)
          ;
      };
        
      var pushTopToBottom = function(){
        if(data.right[0]){
          if(data.right[0].children){
            data.right[0].children.push(data.right[0].children.shift());
          }else{
            data.right.push(data.right.shift());
          }
        }
        chart.update();
      };
      
      var addNodes = function(){
        if(data.right){
          if(data.right[0]){
            (data.right[0].children = data.right[0].children || []).push({name: 'test', children: [{name: 'Foo'}, {name: 'Bar'}, {name: 'None'}]});
          }else{
            data.right.push({name: 'test', children: [{name: 'Foo'}, {name: 'Bar'}, {name: 'None'}]});
          }
        }else{
          data.right = [{name: 'test', children: [{name: 'Foo'}, {name: 'Bar'}, {name: 'None'}]}];
        }
        chart.update();
      };
      
      var swapLeftRight = function(){
        var tmp = data.left;
        data.left = data.right;
        data.right = tmp;
        chart.update();
      };
      
      var moveNode = function(from, to){
        var n = data[from].shift();
        if(n){
          data[to].push(n);
        }
        chart.update();
      };
      
      update({
        "name": "Root",
        "children": [
          {
            "name": "Branch 1",
            "children": [
              {"name": "Leaf 3"},
              {"name": "Leaf 4"}
            ]
          },
          {"name": "Branch 2"}
        ]
        
      });
     loadFreeMind('computermap.mm')

    </script>
  </body>
</html>

mindmap.js

/*
  Sample Usage:
  
  var myData = {
    "name": "Root",
    "children": [
      {
        "name": "Branch 1",
        "children": [
          {"name": "Leaf 3"},
          {"name": "Leaf 4"}
        ]
      },
      {"name": "Branch 2"}
    ]
  };
  
  var chart = MindMap()
    .width(900)
    .height(500)
    ;
  
  d3.select('#chart svg')
    .datum(myData)
    .call(chart)
    ;
*/

var MindMap = function(){
  "use strict";
  var 
      margin = {top: 20, left: 120, bottom: 20, right: 120},
      width = 960,
      height = 500,
      duration = 500,
      identity = '_id',
      handleClick = function(){},
      text = function(d){ return d.name; },
      idx = 0,
      enterNode = function(node){
        node.append("svg:circle")
            .attr("r", 1e-6);
        
        node.append("svg:text")
            .attr("text-anchor", "middle")
            .attr("dy", 14)
            .text(text)
            .style("fill-opacity", 1);
      },
      updateNode = function(node){
        node.select("text")
          .text(text);
        
        node.select("circle")
            .attr("r", 4.5);
      },
      exitNode = function(node){
        node.select("circle")
            .attr("r", 1e-6);

        node.select("text")
            .style("fill-opacity", 1e-6);
      }
    ;
  
  var connector = MindMap.elbow;

  var chart = function(selection){
    selection.each(function(root){
      var w = width - margin.left - margin.right;
      var h = height - margin.top - margin.bottom;

      var container = d3.select(this);
      var vis = container
          .attr("width", width)
          .attr("height", height)
          ;
      var graphRoot = vis.select('g');
      if(!graphRoot[0][0]){
        vis = vis.append('svg:g');
      }else{
        vis = graphRoot;
      }
      vis = vis
      .attr("transform", "translate(" + (w/2+margin.left) + "," + margin.top + ")")
      ;

      root.x0 = h / 2;
      root.y0 = 0;
      
      var tree = d3.layout.tree()
          .size([h, w]);
      
      chart.update = function() { container.transition().duration(duration).call(chart); };
      
      // Ensure we have Left and Right node lists      
      if(!(root.left || root.right)){
        var i=0, l = (root.children||[]).length;
        root.left = [];
        root.right = [];
        for(; i<l; i++){
          if(i%2){
            root.left.push(root.children[i]);
            root.children[i].position = 'left';
          }else{
            root.right.push(root.children[i]);
            root.children[i].position = 'right';
          }
        }
      }
      
      // Compute the new tree layout.
      var nodesLeft = tree
        .size([h, (w/2)-20])
        .children(function(d){
          return (d.depth===0)?d.left:d.children;
        })
        .nodes(root)
        .reverse();
      var nodesRight = tree
        .size([h, w/2])
        .children(function(d){
          return (d.depth===0)?d.right:d.children;
        })
        .nodes(root)
        .reverse();
      root.children = root.left.concat(root.right);
      var nodes = window.nodes = (function(left, right){
        var root = right[right.length-1];
        left.pop();
        left.forEach(function(node){
          node.y = -node.y;
          node.parent = root;
        });
        return left.concat(right);
      })(nodesLeft, nodesRight);

      // Update the nodes…
      var node = vis.selectAll("g.node")
          .data(nodes, function(d) { return d[identity] || (d[identity] = ++idx); });

      // Enter any new nodes at the parent's previous position.
      var nodeEnter = node.enter().append("svg:g")
          .attr("class", "node")
          .attr("transform", function(d) {
            return "translate(" + root.y0 + "," + root.x0 + ")";
          })
          .on("click", handleClick);

          
      enterNode(nodeEnter);

      // Transition nodes to their new position.
      var nodeUpdate = node.transition()
          .duration(duration)
          .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

    
      updateNode(nodeUpdate);

      // Transition exiting nodes to the parent's new position.
      var nodeExit = node.exit().transition()
          .duration(duration)
          .attr("transform", function() { return "translate(" + root.y + "," + root.x + ")"; })
          .remove();

      exitNode(nodeExit);

      // Update the links…
      var link = vis.selectAll("path.link")
          .data(tree.links(nodes), function(d) { return d.target[identity]; });

      // Enter any new links at the parent's previous position.
      link.enter().insert("svg:path", "g")
          .attr("class", "link")
          .attr("d", function() {
            var o = {x: root.x0, y: root.y0};
            return connector({source: o, target: o});
          })
        .transition()
          .duration(duration)
          .attr("d", connector);

      // Transition links to their new position.
      link.transition()
          .duration(duration)
          .attr("d", connector);

      // Transition exiting nodes to the parent's new position.
      link.exit().transition()
          .duration(duration)
          .attr("d", function() {
            var o = {x: root.x, y: root.y};
            return connector({source: o, target: o});
          })
          .remove();

      // Stash the old positions for transition.
      nodes.forEach(function(d) {
        d.x0 = d.x;
        d.y0 = d.y;
      });
    });
  };
  
  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };
  
  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };
  
  chart.duration = function(_) {
    if (!arguments.length) return duration;
    duration = _;
    return chart;
  };
  
  chart.connector = function(_) {
    if (!arguments.length) return connector;
    connector = _;
    return chart;
  };
  
  chart.click = function(_) {
    if (!arguments.length) return handleClick;
    handleClick = _;
    return chart;
  };
  
  chart.identity = function(_) {
    if (!arguments.length) return identity;
    identity = _;
    return chart;
  };
  
  chart.text = function(_) {
    if (!arguments.length) return text;
    text = _;
    return chart;
  };
  
  chart.nodeEnter = function(_){
    if (!arguments.length) return enterNode;
    enterNode = _;
    return chart;
  };
  
  chart.nodeUpdate = function(_){
    if (!arguments.length) return updateNode;
    updateNode = _;
    return chart;
  };
  
  chart.nodeExit = function(_){
    if (!arguments.length) return exitNode;
    exitNode = _;
    return chart;
  };
  
  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
    margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
    margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
    margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
    return chart;
  };
  
  return chart;
};

MindMap.elbow = function (d){
  var source = d.source;
  var target = d.target;
  var hy = (target.y-source.y)/2;
  return "M" + source.y + "," + source.x +
         "H" + (source.y+hy) +
         "V" + target.x + "H" + target.y;
};

MindMap.loadFreeMind = function(fileName, callback){
  d3.xml(fileName, 'application/xml', function(err, xml){
    // Changes XML to JSON
    var xmlToJson = function(xml) {
      
      // Create the return object
      var obj = {};

      if (xml.nodeType == 1) { // element
        // do attributes
        if (xml.attributes.length > 0) {
        obj["@attributes"] = {};
          for (var j = 0; j < xml.attributes.length; j++) {
            var attribute = xml.attributes.item(j);
            obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
          }
        }
      } else if (xml.nodeType == 3) { // text
        obj = xml.nodeValue;
      }

      // do children
      if (xml.hasChildNodes()) {
        for(var i = 0; i < xml.childNodes.length; i++) {
          var item = xml.childNodes.item(i);
          var nodeName = item.nodeName;
          if (typeof(obj[nodeName]) == "undefined") {
            obj[nodeName] = xmlToJson(item);
          } else {
            if (typeof(obj[nodeName].push) == "undefined") {
              var old = obj[nodeName];
              obj[nodeName] = [];
              obj[nodeName].push(old);
            }
            obj[nodeName].push(xmlToJson(item));
          }
        }
      }
      return obj;
    };
    var js = xmlToJson(xml);
    var data = js.map.node;
    var parseData = function(data, direction){
      var key, i, l, dir = direction, node = {}, child;
      for(key in data['@attributes']){
        node[key.toLowerCase()] = data['@attributes'][key];
      }
      node.direction = node.direction || dir;
      l = (data.node || []).length;
      if(l){
        node.children = [];
        for(i=0; i<l; i++){
          dir = data.node[i]['@attributes'].POSITION || dir;
          child = parseData(data.node[i], {}, dir);
          (node[dir] = node[dir] || []).push(child);
          node.children.push(child);
        }
      }
      return node;
    };
    var root = parseData(data, 'right');
    
    return callback(err, root);
  });
};