title: D3.js MIndMap Layers
body: <p>so i have this script </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
  
      &lt;title&gt;MMM PROJECT&lt;/title&gt;
  
      &lt;style&gt;
   
   .node { 
    cursor: pointer;
   }
   .node circle {
     fill: #fff;
     stroke: coral;
     r: 20 ;
     stroke-width: 3px;
   }
   .node text {
     font: 12px sans-serif;
   }
   .link {
     fill: none;
     stroke: #287233;
     stroke-width: 2px;
   }
   
      &lt;/style&gt;
  
    &lt;/head&gt;
  
    &lt;body&gt;
  
  &lt;!-- load the d3.js library --&gt; 
  &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
   
  &lt;script&gt;
  var treeData =[{"name" : "Master",
    "children" : [
  
      {"name" : "C++BIO",
       "parent" : "Master",
       "children" : [
  
        {"name" : "Semestre 7",
         "parent" : "C++BIO",
         "children" : [
  
            {"nane" : "UEs Obligatoires",
             "parent" : "Semestre 7",
             "children" : [
          {"name" : "Anglais", 
           "parent" : "UEs Obligatoires"
           },
           {"name" : "Algo", 
           "parent" : "UEs Obligatoires"
           }, 
           {"name" : "Unix", 
            "parent" : "UEs Obligatoires"
           }
           ]
           },
  
            {"name" : "UEs Facultatives", 
             "parent" : "Semestre 7", 
             "children" : [
          {"name" : "Imagerie", 
           "parent" : "UEs Facultatives"
           },
           {"name" : "Physique",
            "parent" : "UEs Facultatives"
            }
            ]
            }
            ] 
            },
  
        {"name" : "Semestre 8", 
         "parent" : "C++BIO", 
         "children" : [
  
            {"nane" : "UEs Obligatoires",
             "parent" : "Semestre 8",
             "children" : [
            {"name" : "Allemand", 
           "parent" : "UEs Obligatoires"
           },
           {"name" : "Truc", 
           "parent" : "UEs Obligatoires"
           }, 
           {"name" : "Logiciel", 
            "parent" : "UEs Obligatoires"
           }
           ]
           },
  
            {"name" : "UEs Facultatives", 
             "parent" : "Semestre 8", 
             "children" : [
          {"name" : "Maison", 
           "parent" : "UEs Facultatives"
           },
           {"name" : "Dark Vador",
            "parent" : "UEs Facultatives"
            }
            ]
            }
            ]
            }
            ]
            },
  
    {"name" : "parcours 2",
       "parent" : "Master",
       "children" : [
  
        {"name" : "Semestre 7",
         "parent" : "C++BIO",
         "children" : [
  
            {"nane" : "UEs Obligatoires",
             "parent" : "Semestre 7",
             "children" : [
          {"name" : "Anglais", 
           "parent" : "UEs Obligatoires"
           },
           {"name" : "Algo", 
           "parent" : "UEs Obligatoires"
           }, 
           {"name" : "Leia", 
            "parent" : "UEs Obligatoires"
           }
           ]
           },
  
            {"name" : "UEs Facultatives", 
             "parent" : "Semestre 7", 
             "children" : [
          {"name" : "Cheval", 
           "parent" : "UEs Facultatives"
           },
           {"name" : "poney",
            "parent" : "UEs Facultatives"
            }
            ]
            }
            ] 
            },
  
        {"name" : "Semestre 8", 
         "parent" : "C++BIO", 
         "children" : [
  
            {"nane" : "UEs Obligatoires",
             "parent" : "Semestre 8",
             "children" : [
            {"name" : "patate", 
           "parent" : "UEs Obligatoires"
           },
           {"name" : "cornichon", 
           "parent" : "UEs Obligatoires"
           }, 
           {"name" : "courgette", 
            "parent" : "UEs Obligatoires"
           }
           ]
           },
  
            {"name" : "UEs Facultatives", 
             "parent" : "Semestre 8", 
             "children" : [
          {"name" : "Julie", 
           "parent" : "UEs Facultatives"
           },
           {"name" : "Khaoula",
            "parent" : "UEs Facultatives"
            }
            ]
            }
            ]
            }
            ]
            }
            ]
            }
            ]
  ;
  // ************** Generate the tree diagram  *****************
  var margin = {top: 20, right: 120, bottom: 20, left: 120},
   width = 960 - margin.right - margin.left,
   height = 500 - margin.top - margin.bottom;
   
  var i = 0,
   duration = 750,
   root;
  var tree = d3.layout.tree()
   .size([height, width]);
  var diagonal = d3.svg.diagonal()
   .projection(function(d) { return [d.y, d.x]; });
  var svg = d3.select("body").append("svg")
   .attr("width", width + margin.right + margin.left)
   .attr("height", height + margin.top + margin.bottom)
    .append("g")
   .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  root = treeData[0];
  root.x0 = height / 2;
  root.y0 = 0;
    
  update(root);
  d3.select(self.frameElement).style("height", "500px");
  function update(source) {
    // Compute the new tree layout.
    var nodes = tree.nodes(root).reverse(),
     links = tree.links(nodes);
    // Normalize for fixed-depth.
    nodes.forEach(function(d) { d.y = d.depth * 180; });
    // Update the nodes…
    var node = svg.selectAll("g.node")
     .data(nodes, function(d) { return d.id || (d.id = ++i); });
    // Enter any new nodes at the parent's previous position.
    var nodeEnter = node.enter().append("g")
     .attr("class", "node")
     .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
     .on("click", click);
    nodeEnter.append("circle")
     .attr("r", 1e-6)
     .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
    nodeEnter.append("text")
     .attr("x", function(d) { return d.children || d._children ? -13 : 13; })
     .attr("dy", ".35em")
     .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
     .text(function(d) { return d.name; })
     .style("fill-opacity", 1e-6);
    // Transition nodes to their new position.
    var nodeUpdate = node.transition()
     .duration(duration)
     .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
    nodeUpdate.select("circle")
     .attr("r", 10)
     .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
    nodeUpdate.select("text")
     .style("fill-opacity", 1);
    // Transition exiting nodes to the parent's new position.
    var nodeExit = node.exit().transition()
     .duration(duration)
     .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
     .remove();
    nodeExit.select("circle")
     .attr("r", 1e-6);
    nodeExit.select("text")
     .style("fill-opacity", 1e-6);
    // Update the links…
    var link = svg.selectAll("path.link")
     .data(links, function(d) { return d.target.id; });
    // Enter any new links at the parent's previous position.
    link.enter().insert("path", "g")
     .attr("class", "link")
     .attr("d", function(d) {
    var o = {x: source.x0, y: source.y0};
    return diagonal({source: o, target: o});
     });
    // Transition links to their new position.
    link.transition()
     .duration(duration)
     .attr("d", diagonal);
    // Transition exiting nodes to the parent's new position.
    link.exit().transition()
     .duration(duration)
     .attr("d", function(d) {
    var o = {x: source.x, y: source.y};
    return diagonal({source: o, target: o});
     })
     .remove();
    // Stash the old positions for transition.
    nodes.forEach(function(d) {
   d.x0 = d.x;
   d.y0 = d.y;
    });
  }
  // Toggle children on click.
  function click(d) {
    if (d.children) {
   d._children = d.children;
   d.children = null;
    } else {
   d.children = d._children;
   d._children = null;
    }
    update(d);
  }
  &lt;/script&gt;
   
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>can anybody help me with making an arc for each layer to hold the nodes so it will be one link at each level holding the arc (and the arc holding the nodes of each level).. so it would be more like this picture:
  <a href="http://i.stack.imgur.com/VumNa.jpg" rel="nofollow">mindMap</a> I'm using the D3.js library !! if you have any similar codes it would be great too</p>