D3 Examples - Network flows + rules

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.link line {
  stroke: #696969;
}
​
.node rect {
  stroke: #000;
  stroke-width: 1.5px;
}
​
.node text {
  font-size: 12px;
  font-family: sans-serif;
  pointer-events: none;
}
​
.tooltip {
    background: #eee;
    box-shadow: 0 0 5px #999999;
    color: #333;
    font-size: small;
  font-family: sans-serif;
    padding: 2px;
    position: absolute;
    text-align: center;
    z-index: 10;
    display: block;
    opacity: 0;
}
​
th,tr,td{
    border: 1px solid black;
    padding:2px;
  font-size: 12px;
}
​
table{
    border: border-collapsed;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
​
var width = 960,
    height = 500;
​
var color = d3.scale.category20();
​
var radius = d3.scale.sqrt()
    .range([0, 6]);
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
var force = d3.layout.force()
    .size([width, height])
    .charge(-4000)
    .linkDistance(function(d) { return radius(d.source.size) + radius(d.target.size) + 20; });
  
d3.json("graph.json", function(error, graph) {
  if (error) throw error;
​
  force
      .nodes(graph.nodes)
      .links(graph.links)
      .on("tick", tick)
      .start();
​
  var link = svg.selectAll(".link")
      .data(graph.links)
    .enter().append("g")
      .attr("class", "link");
​
  link.append("line")
      .style("stroke-width", "3px")
        .attr('marker-end', function(d) { return "url(#markerEnd" + d.end_color +")"; })
      .attr('marker-start', function(d) { return "url(#markerStart" + d.start_color +")"; });
​
  // Add a tooltip on the links
  var link_tooltip = d3.select("body")
    .append('div')
    .attr('class', 'tooltip');
​
  link_tooltip.append('div')
    .attr('class', 'value');
  
  link.on('mouseover', function(d) {
        var rows = "";
    rows += "<tr><td>" + "Source" + "</td><td>" + d.source.name + " (" + d.source_port + ")</td></tr>";
    rows += "<tr><td>" + "Destination" + "</td><td>" + d.target.name + " (" + d.target_port + ")</td></tr>";
    rows += "<tr><td>" + "Bytes up" + "</td><td>" + d.bytes_up + "</td></tr>";
    rows += "<tr><td>" + "Bytes down" + "</td><td>" + d.bytes_down + "</td></tr>";
    var html = "<table><tbody>" + rows + "</tbody></table>";
​
    link_tooltip.select('.value').html(html);
        link_tooltip.style('display', 'block');
    link_tooltip.style('opacity', 2);
    });
  link.on('mousemove', function(d) {
    link_tooltip.style('top', (d3.event.layerY + 10) + 'px');
    link_tooltip.style('left', (d3.event.layerX - 25) + 'px');
  });
  link.on('mouseout', function(d) {
    link_tooltip.style('display', 'none');
    link_tooltip.style('opacity', 0);
  });
​
  var node = svg.selectAll(".node")
      .data(graph.nodes)
    .enter().append("g")
      .attr("class", "node")
      .call(force.drag);
​
  var rectHeight = 30;
  var rectWidth = 60;
  
  node.append("rect")
      .attr("class", "node")
      .attr("width", rectWidth)
      .attr("height", rectHeight)
      .attr("x", function(d) { return -(rectWidth/2); })
      .attr("y", function(d) { return -(rectHeight/2); })
      .style("fill", function(d) { return color(d.name); })
  
  node.append("text")
      .attr("dy", ".35em")
      .attr("text-anchor", "middle")
      .text(function(d) { return d.name; });
​
  node.on('mouseover', function(d) {
        var rows = "";
    rows += "<tr><td>" + "Application" + "</td><td>" + d.application + "</td></tr>";
    rows += "<tr><td>" + "Location" + "</td><td>" + d.location + "</td></tr>";
    var html = "<table><tbody>" + rows + "</tbody></table>";
​
    link_tooltip.select('.value').html(html);
        link_tooltip.style('display', 'block');
    link_tooltip.style('opacity', 2);
    });
  node.on('mousemove', function(d) {
    link_tooltip.style('top', (d3.event.layerY + 10) + 'px');
    link_tooltip.style('left', (d3.event.layerX - 25) + 'px');
  });
  node.on('mouseout', function(d) {
    link_tooltip.style('display', 'none');
    link_tooltip.style('opacity', 0);
  });
  
  // TODO - we could do this in a loop
  
  svg.append('defs').append('marker')
       .attr({'id':'markerEndGreen',
               'viewBox':'-0 -5 10 10',
               'refX':35,
               'refY':0,
               'orient':'auto',
               'markerWidth':5,
               'markerHeight':5,
               'xoverflow':'visible'})
         .append('svg:path')
            .attr('d', 'M0,-5L10,0L0,5')
            .attr('fill', "green")
            .attr('stroke','#FF');
  
  svg.append('defs').append('marker')
       .attr({'id':'markerStartGreen',
               'viewBox':'-0 -5 10 10',
               'refX':-25,
               'refY':0,
               'orient':'auto',
               'markerWidth':5,
               'markerHeight':5,
               'xoverflow':'visible'})
       .append('svg:path')
            .attr('d', 'M0,0L10,-5L10,5Z')
            .attr('fill', "green")
            .attr('stroke','#FF');  
  
    svg.append('defs').append('marker')
       .attr({'id':'markerEndRed',
               'viewBox':'-1 -5 2 10',
               'refX':25,
               'refY':0,
               'orient':'auto',
               'markerWidth':5,
               'markerHeight':5,
               'xoverflow':'visible'})
         .append('svg:path')
            .attr('d', 'M 0,0 m -1,-5 L 1,-5 L 1,5 L -1,5 Z')
            .attr('fill', "red")
            .attr('stroke','#FF'); // TODO - this makes it transparent but there may be a better way
  
  svg.append('defs').append('marker')
       .attr({'id':'markerStartRed',
               'viewBox':'-1 -5 2 10',
               'refX':-25,
               'refY':0,
               'orient':'auto',
               'markerWidth':5,
               'markerHeight':5,
               'xoverflow':'visible'})
       .append('svg:path')
            .attr('d', 'M 0,0 m -1,-5 L 1,-5 L 1,5 L -1,5 Z')
            .attr('fill', "red")
            .attr('stroke','#FF'); 
  
  function tick() {
    link.selectAll("line")
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });
    
    node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
  }
});
</script>
​
    