All examples By author By category About

donaldh

Full window Github gist

var div = d3.select("#chart");
var vis = div.append("svg:svg")
        .attr("class", "panel")
        .attr("width", 800)
        .attr("height", 600);

var data = parseTopo(topo);
var force = d3.layout.force()
      .gravity(.05)
        .charge(-400)
        .distance(150)
        .nodes(data.nodes)
        .links(data.links)
        .size([800, 600]);

force.on("tick", function(e) {
  vis.selectAll("circle")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });
	  
  vis.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; });
	     
  vis.selectAll('text.aEnd')
    .attr('x', function(d) { return xpos(d.source, d.target); })
    .attr('y', function(d) { return ypos(d.source, d.target); });
	     
  vis.selectAll('text.zEnd')
    .attr('x', function(d) { return xpos(d.target, d.source); })
    .attr('y', function(d) { return ypos(d.target, d.source); });
});
  
restart();

function restart() {
    force.start();
    
    var link = vis.selectAll("line")
      .data(data.links).enter()
      .insert("svg:g", "circle") // insert before the nodes
      .attr('class', 'link');
    addLink(link);

function xpos(s, t) {
  var angle = Math.atan2(t.y - s.y, t.x - s.x);
  return 30 * Math.cos(angle) + s.x;
};

function ypos(s, t) {
  var angle = Math.atan2(t.y - s.y, t.x - s.x);
  return 30 * Math.sin(angle) + s.y;
};

l.append('svg:text')
  .attr('class', 'zEnd')
  .attr('x', function(d) { return d.target.x; })
  .attr('y', function(d) { return d.target.y; })
  .attr('text-anchor', 'middle')
  .text(function(d) { return d.z; });
};
	</script>
  </body>
</html>

Modified http://mbostock.github.com/d3/d3.js?2.9.2 to a secure url

https://mbostock.github.com/d3/d3.js?2.9.2