filter tree

_.md

[ Launch: filter tree ] 988d613fb5365b18c52e by engleek

config.json

{"description":"filter tree","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/XN0OuUa.png"}

inlet.js

var svg = d3.select('svg')
	.style('padding', 50);

var layout = d3.layout.tree()
  .size([400, 300]);

var diagonal = d3.svg.diagonal();

var data = {
  name: 'start',
  children: [{
    name: 'first',
    children: [{
      name: 'second',
      children: [{
        name: 'first',
        children: [{
          name: 'child1',
          size: 1234
        }, {
          name: 'child2', children: [{
            name: 'child1', size: 10
          }, {
            name: 'child1', size: 10
          }]
        }]
      }]
    }]
  }]
};

var nodes = layout.nodes(data);
var links = layout.links(nodes);

var g = svg.selectAll('.node')
    .data(nodes);

var node = g.enter().append('g')
	.classed('node', true)
	.attr('transform', function (d) { return 'translate(' + d.y + ', ' + d.x + ')'; });

node.append('circle')
    .attr('r', 5);

node.append('text')
	.style('font-size', 10)
	.style('text-anchor', 'end')
	.text(function (d) { return d.name; });

var lines = svg.selectAll('.link')
	.data(links);

lines.enter().append('path')
.style('fill', 'none')
.style('stroke', 'black')
.attr('d', function (d) {
  var source = {
    x: d.source.y,
    y: d.source.x
  };
  var target = {
    x: d.target.y,
    y: d.target.x
  };
  return diagonal({ source: target, target: source })
});