MultiParent Tree Test

forked from anonymous's block: MultiParent Tree Test

forked from csduarte's block: MultiParent Tree Test

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js">
  </script>
  <style>
    body { 
      margin:0;
      position:fixed;
      top:0;
      right:0;
      bottom:0;
      left:0; 
    }
  </style>
</head>

<body>
  <script>
    var input = JSON.parse('[{"value":1,"parents":[],"children":[4,5,8],"level":1,"position":1,"total":2},{"value":3,"parents":[2],"children":[6],"level":2,"position":1,"total":4},{"value":4,"parents":[2],"children":[6],"level":2,"position":2,"total":4},{"value":5,"parents":[1],"children":[7],"level":2,"position":3,"total":4},{"value":6,"parents":[3,4],"children":[9],"level":3,"position":1,"total":3},{"value":7,"parents":[5],"children":[],"level":3,"position":2,"total":3},{"value":8,"parents":[1],"children":[10],"level":2,"position":4,"total":4},{"value":9,"parents":[6],"children":[],"level":4,"position":1,"total":1},{"value":10,"parents":[8],"children":[],"level":3,"position":3,"total":3},{"value":2,"parents":[],"children":[3,4],"level":1,"position":2,"total":2}]')
  
    
    var svg = d3.select("body").append("svg")
      .attr({
        height: '300px',
        width: '300px',
        transform: 'translate(10,10)'
      })
    
    var rect = svg.append('rect')
    	.attr({
        fill: 'none',
				stroke: 'black',
      	width: '300px',
      	height: '300px'
    	})
    
    var elements = svg.selectAll('.item')
      .data(input)
      .enter()
    
    var groups = elements.append('g')
      
    groups.each(function(d,i){
			d.children.forEach(function(child){
        c = input.find(function(i){ return child === i.value });
        svg.append('line')
          .attr({
            'x1':d.position * (300 / (d.total + 1)),
            'y1':d.level * 50,
            'x2':c.position * (300 / (c.total + 1)),
            'y2':c.level * 50,
            'stroke': 'black',
            'stroke-width': 2
        	});
      });
    });
    
    var circles = elements
      .append('circle')
    	.attr({
      	'stroke': 'black',
        'stroke-width': 2,
      	'fill': 'white',
      	'r': 20,
      	'cx': function(d, i){ 
          return d.position * (300 / (d.total + 1));
        },
      	'cy': function(d, i){ 
          return d.level * 50 
        }
    	});

var texts = elements.append('text')
     	.attr({
      	'text-anchor': 'middle',
      	'y': function(d, i){ 
          return d.level * 50 + 5
        },
        'x': function(d, i){ 
          return d.position * (300 / (d.total + 1));
        }
    	})
    	.text(function(d){ return d.value });
    
    
    
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js