testing filtering of force layout

by Nivaldo

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<body>
    <pre>http://stackoverflow.com/questions/5342276/how-to-filter-links-dynamically-in-a-node-link-network-in-protovis</pre><br/>
    <div id="slider"></div> 
</body>

CSS

.link line {
  stroke: #696969;
}

.link line.separator {
  stroke: #fff;
  stroke-width: 2px;
}

.node circle {
  stroke: #000;
  stroke-width: 1.5px;
}

.node text {
  font: 10px sans-serif;
  pointer-events: none;
}

JavaScript

//(function(){drawNetwork() }).call(this);

$(function() {
    //initiate diagram
    drawNetwork();
    //initiate slider
    $( "#slider" ).slider({
        min: 1,
      max: 10,
    slide: function( event, ui ) {
          filterDiagram(ui.value)
      }    
    });
  });

//filter diagram !?!?!
function filterDiagram(){
    //console.log(links);
    force.stop();
    console.log(nodes);
    nodes = nodes.filter(function(d) { /*console.log(d);*/ return d.cSize > 5} );
    links = links.filter(function(d) { /*console.log(d);*/ return d.source.cSize > 5} );
    force.nodes(nodes);
    force.links(links); 
    force.resume(); 
    //drawNetwork();
}

var force, links, nodes;

function drawNetwork(){
    (function(){
      var width, height, rules, map, tasks, svg, tick, radius, link, node;
      width = 960;
      height = 500;
      rules = [['L5', 'L2',5], ['L5', 'L2',3], ['L4', 'L2',4], ['L2', 'L1',10], ['L3', 'L1',15], ['L1', 'C1',13],  ['C1', 'R2',22], ['C1', 'R3',25], ['R2', 'R4',10], ['R3', 'R6',23], ['R3', 'R7',30]];
      map = d3.map();
      rules.forEach(function(rule){
        map.set(rule[0], {
          fixed: false,
            cSize:rule[2]
        });
          return map.set(rule[1],false,rule[2]);
      });
        
      map.set('C1', {
        fixed: true,
        x: 100,
        y: height / 2
      });
        
      tasks = map.keys();
      links = rules.map(function(rule){
        return {
          source: tasks.indexOf(rule[0]),
          target: tasks.indexOf(rule[1])
        };
      });
      nodes = tasks.map(function(k){
        var entry;
        entry = {
          name: k,
            cSize: map.get(k).cSize
        };
        if (map.get(k).fixed) {
          entry.fixed = true;
          entry.x = map.get(k).x;
          entry.y = map.get(k).y;
        }
        return entry;
      });
      svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
        
       ...