Tributary inlet

_.md

[ Launch: Tributary inlet ] 5347623 by dfernandez79

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

    //JSON object with the data
      var treeData = {"name" : "A", "info" : "tst", "children" : [
            {"name" : "A1" },
            {"name" : "A2" },
            {"name" : "A3", "children": [
                  {"name" : "A31", "children" :[
            {"name" : "A311" },
            {"name" : "A312" }
    ]}] }
      ]};
 
// Create a svg canvas
var vis = d3.select('svg');
 
// Create a tree "canvas"
var tree = d3.layout.tree().size([336,284]);
 
var diagonal = d3.svg.diagonal()
      // change x and y (for the left to right tree)
      .projection(function(d) { return [d.y, d.x]; });
 
// Preparing the data for the tree layout, convert data into an array of nodes
var nodes = tree.nodes(treeData);
// Create an array with all the links
var links = tree.links(nodes);
 
var link = vis.selectAll("pathlink").data(links)
      .enter().append("svg:path")
      .attr({fill:'none', stroke:'#ccc', 'stroke-width':4.5})
      .attr("d", diagonal)
 
var node = vis.selectAll("g.node")
      .data(nodes)
      .enter().append("svg:g")
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
 
      // Add the dot at every node
      node.append("svg:circle").attr("r", 5.5);
 
      // place the name atribute left or right depending if children
      node.append("svg:text")
      .attr("dx", function(d) { return d.children ? -8 : 15; })
      .attr("dy", 20)
      .attr("text-anchor", function(d) { return d.children ? "end" : "start"; })
      .text(function(d) { return d.name; })