Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- d3.json('/data/bvg-graph.json', function(json){
- var width = 740,
- height = 600;
- var svg = d3.select('svg')
- .style("display", "block")
- .attr('width', width)
- .attr('height', height);
- // draw the graph edges
- var link = svg.selectAll("line.link")
- .data(json.links)
- .enter().append("line")
- .style('stroke','black');
- // draw the graph nodes
- var node = svg.selectAll("circle.node")
- .data(json.nodes)
- .enter()
- .append("circle")
- .attr("class", "node")
- .style("fill",function(d) {
- // custom colours based on train type
- if (d.name.match(/^S\+U/)) {
- return 'rgb(215,49,58)';
- }
- else if (d.name.match(/^U/)) {
- return 'rgb(0,114,171)';
- }
- else {
- return 'green';
- }
- })
- .attr("r", 12);
- var nodename = svg.selectAll("text.nodename")
- .data(json.nodes)
- .enter()
- .append("text")
- .text(function(d) {return d.name});
- // create the layout
- var force = d3.layout.force()
- .charge(-250)
- .linkDistance(function(d,e) {
- var distance = 1.5*parseFloat(d.distance)/10 - 5;
- return (isNaN(distance)) ? 10 : distance; })
- .size([width, height])
- .nodes(json.nodes)
- .links(json.links)
- .start();
- // define what to do one each tick of the animation
- force.on("tick", function() {
- 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; });
- node.attr("cx", function(d) { return d.x; })
- .attr("cy", function(d) { return d.y; });
- nodename.attr("x", function(d) { return d.x - 3; })
- .attr("y", function(d) { return d.y + 4; });
- });
- // precalculate force layout ticks for more natural appearance
- var k = 0;
- while ((force.alpha() > 1e-2) && (k < 40)) {
- force.tick(),
- k = k + 1;
- }
- // bind the drag interaction to the nodes
- node.call(force.drag);
- // misc stuff for auto resizing svg
- function updateWindow(){
- $("svg").width($(".site").width());
- }
- window.onresize = updateWindow;
- if ($(".site").width() < 740) {
- updateWindow();
- }
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement