Modifying a Force Layout

_.md

[ Launch: Modifying a Force Layout ] 34993158e0aa4fad9061 by dmann99

config.json

{"description":"Modifying a Force Layout","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"index.html":{"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/k8FkLY6.png"}

index.html

<div id="viz" width=500 height=500></div>

inlet.js

// Modifying a Force Layout
// http://bl.ocks.org/mbostock/1095795
// http://stackoverflow.com/questions/20644415/d3-appending-text-to-a-svg-rectangle


var width = 500,
    height = 500;

var color = d3.scale.category10();

var nodes = [],
    links = [];

var force = d3.layout.force()
    .nodes(nodes)
    .links(links)
    .charge(-400)
    .linkDistance(120)
    .size([width, height])
    .on("tick", tick);
 
var svg = d3.select("#viz")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

var node = svg.selectAll(".node"),
    link = svg.selectAll(".link"),
    lbl = svg.selectAll(".lbl");

// 1. Add three nodes and three links.
setTimeout(function() {
  var a = {id: "a", volume: "5"}, b = {id: "b", volume:"10"}, c = {id: "c",volume:"15"};
  nodes.push(a, b, c);
  links.push({source: a, target: b}, {source: a, target: c}, {source: b, target: c});
  start();
}, 0);

// 2. Remove node B and associated links.
setTimeout(function() {
  nodes.splice(1, 1); // remove b
  links.shift(); // remove a-b
  links.pop(); // remove b-c
  start();
}, 3000);

// Add node B back.
setTimeout(function() {
  var a = nodes[0], b = {id: "b", volume : "10"}, c = nodes[1];
  nodes.push(b);
  links.push({source: a, target: b}, {source: b, target: c});
  start();
}, 6000);

function start() {
  link = link.data(force.links(), function(d) { return d.source.id + "-" + d.target.id; });
  link.enter().insert("line", ".node").attr("class", "link");
  link.exit().remove();

  node = node.data(force.nodes(), function(d) { return d.id;});
  
  
  // Add a G to hold more elements
   var mygs = node.enter()
  .append("g")
  .attr("class","container");
 
  mygs.append("text")
      .attr("class","lbl")
      .attr("x", function(d) { return d.volume * 10})
      .attr("y", function(d) { return d.volume * 10})
      .text(function(d) { return d.id + " " + d.volume; });

  node.enter()
      .append("circle")
      .attr("class", function(d) { return "node " + d.id; })
      .attr("r", 10)
  
// .transition()
// .attr("r", function(d){ return d.volume;} )
// .delay( 500 )
// .duration( 1000 )
// .ease("linear");
  
  ;
  
 
  node.exit().remove();

  force.start();
}

function tick() {
  node.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; });

  lbl.attr("x", function(d) { return d.x; })
       .attr("y", function(d) { return d.y; });

}

style.css

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

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

.node.a { fill: #1f77b4; }
.node.b { fill: #ff7f0e; }
.node.c { fill: #2ca02c; }