d3 force layout

d3 force layout.markdown

d3 force layout

add node, delete node, add link, delete node

A Pen by Wayne on CodePen.

License.

script.js

var width = 640,
    height = 480;

var nnodes = [
    { type: 'switch', dpid: '00:01' },
    { type: 'switch', dpid: '00:02' },
    { type: 'switch', dpid: '00:03' },
    { type: 'host', mac: '00:00:01' },
    { type: 'host', mac: '00:00:02' }
];

var llinks = [
    { source: 0, target: 1 },
    { source: 0, target: 2 },
    { source: 1, target: 2 },
    { source: 1, target: 3 },
    { source: 1, target: 4 },
];
var svg = d3.select('body')
    .append('svg')
    .attr('width', width)
    .attr('height', height);

var force = d3.layout.force()
    .size([width, height])
    .charge(-400)
    .linkDistance(40)
    .linkStrength(0.3)
    .nodes(nnodes)
    .links(llinks)
    .linkDistance(width/3)
    .on('tick', () => {
        node.attr('r', width/25)
            .attr('cx', function(d) { return d.x; })
            .attr('cy', function(d) { return d.y; });
        link.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; });
    });

var link = svg.selectAll('.link')
    .data(llinks)
    .enter().append('line')
    .attr('class', 'link');

var node = svg.selectAll('.node')
    .data(nnodes)
    .enter()
      .append('circle')
      .attr('class', e => (e.type === 'switch' ) ?
            'node switch' : 'node host')
      .call(force.drag);


force.start();

function updateTopo(){
  // Link
  link = link.data(force.links());
  link.enter().insert("line", ".node").attr("class", "link");
  link.exit().remove();
  // Node
  node = node.data(force.nodes());
  node.enter()
      .append('circle')
      .attr('class', e => (e.type === 'switch' ) ?
            'node switch' : 'node host')
      .call(force.drag);

  node.exit().remove();
  force.start();
}


function addNode(){
  nnodes.push({ type: 'host', mac: '00:00:03'});
}
function delNode(){
  nnodes.pop();
}
function addLink(){
  llinks.push({ source: 3, target:4 });
}
function delLink(){
  llinks.pop();
}

// Demo
/*setInterval(function(){
  addNode();
  updateTopo();
},1000);*/

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/immutable/3.7.4/immutable.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

style.css

.node {
    fill: #ccc;
    stroke: #ff0;
    stroke-width: 4px;
}

.swtich {
   fill: #c00;
}

.host {
  fill: #00f;
}

.link {
    stroke: #999;
    stroke-width: 4px;
}