D3 Trees

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
<script src="//rawgit.com/kristw/75b61f9beeab9b530612/raw/389e984e4041117a9185cf6edad9f6b85a38097a/d3kit.min.js"></script>
<script src="//rawgit.com/ramnathv/5c5181017a48b41beb9b/raw/2c76c805a657c22c2aae0c3dfa124dcaef0e9784/flatUIColors.js"></script>
<script src="//rawgit.com/ramnathv/da56b535af64c548f029/raw/66451bb9daa5df4d75e4e320d941bb879df90ddf/getData.js"></script>
<select id='layout'>
    <option>tree</option>
    <option>cluster</option>
</select>
<div id="chart"></div>

CoffeeScript

elbow = (d, i) ->
  "M" + d.source.y + "," + d.source.x + "V" + d.target.x + "H" + d.target.y

chartConstructor = (skeleton) ->
  layers = skeleton.getLayerOrganizer()
  layers.create(['links', 'nodes'])
  visualize = ->
    data = skeleton.data()
    opts = skeleton.options()
    H = skeleton.getInnerHeight()
    W = skeleton.getInnerWidth()
    L = skeleton.getLayerOrganizer()
    tree = d3.layout[opts.layout]()
      .size([H, W])
    diagonal = d3.svg.diagonal()
      .projection (d) -> [d.y, d.x]
        
    #data.x0 = H / 2
    #data.y0 = 0
    collapse = (d) ->
      if d.children
        d._children = d.children
        d._children.forEach(collapse)
        d.children = null

    #data.children.forEach(collapse);
    
    nodeData = tree.nodes(data)
    linkData = tree.links(nodeData)
    
    linkLayer = L.get("links")
    links = linkLayer.selectAll(".link")
      .data(linkData)
    links.enter().append("path.link")
    links
      .attr
        stroke: d3.hsl(opts.stroke).brighter()
        fill: "none"
      .transition().attr
        d: diagonal
        
    nodeLayer = L.get("nodes")
    nodes = nodeLayer.selectAll(".node")
      .data(nodeData)
    nodes.enter().append("circle.node")
      .attr
         "transform": (d) ->
           "translate(#{d.y}, #{d.x})"
    nodes
      .attr
         r: 5
         fill: d3.hsl(opts.stroke).brighter()
      .transition()
      .attr
         "transform": (d) ->
           "translate(#{d.y}, #{d.x})"
     
    nodes.on "mouseover", ->
      nodes.transition()
        .style('opacity', 0.1)
      d3.select(@).transition()
        .attr("r", 7)
        .style('opacity', 1)
  
    nodes.on "mouseout", ->
      nodes.transition()
        .attr("r", 5)
        .style('opacity', 1)
    
    
    
  skeleton
    .resizeToFitContainer()
    .on("data", visualize)
    .on("resize", visualize)
    .on("options", visualize)
    .autoResize(true)
  

renderChart = (el, x, width, height) ->
  Chart =...