network

_.md

[ Launch: network ] ea2cc2f4ed70b0d88dba by radiodario
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"network","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"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},"nodes.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":false,"ajax-caching":true}

inlet.js

var svg = d3.select("svg")

var middle = {
  l : tributary.sw/2,
  t : tributary.sh/2
};

var nodes = [];
var links = [];
console.log(middle);
var a = {
  name : "concept",
  id : "a",
  fixed: true,
  x : middle.l,
  y : middle.t
};

var root = a;

var b = {
  name : "concept",
  id : "b"
};
var c = {
  name : "concept",
  id : "c"
};
var d = {
  name : "concept",
  id : "d"
};
var e = {
  name : "concept",
  id : "e"
}

nodes.push(a, b, c, d, e);
links.push(
  {source: a, target: b}, 
  {source: a, target: c}, 
  {source: a, target: d},
  {source: d, target: e}
);

var force = d3.layout.force()
  .nodes(nodes)
  .links(links)
  .charge(-400)
  .linkDistance(100)
  .size([tributary.sw, tributary.sh])
  .on("tick", tick);

var node = svg.selectAll('.node');
var link = svg.selectAll('.link');

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

  node = node.data(force.nodes(), function(d) { return d.id;});
  node.enter().append("circle")
    .attr("class", "node")
    .attr("r", 24)
  	.attr("fill", "#fabcde")
  	.attr("fill-opacity", 0.4);
  node.exit().remove();
  
  node.on('mouseover', function() {
    d3.select(this)
      .attr('stroke', '#333');
  })
  .on('mouseout', function() {
    d3.select(this)
      .attr('stroke', null);
  })
  .on('click', function(d) {
    root.fixed = false;
    root = d;
    d.x = middle.l;
    d.y = middle.t;
    d.fixed = true;
	force.alpha(0.5);
  })

  force.start();
}

function tick() {
  node.attr({
    cx: function(d) { return d.x; },
    cy: function(d) { return d.y; }
  });
  
  link.attr({
    x1: function(d) { return d.source.x; },
    x2: function(d) { return d.target.x; },
    y1: function(d) { return d.source.y; },
    y2: function(d) { return d.target.y; }
  });
}

start();