graph.min.js

var toggle=0,linkedByIndex={};function MyGraph(e){this.addNode=function(e,t){a.push({id:e,value:t}),g()},this.removeNode=function(e){for(var t=0,n=r(e);t<s.length;)s[t].source==n||s[t].target==n?s.splice(t,1):t++;a.splice(i(e),1),g()},this.removeLink=function(e,t){for(var n=0;n<s.length;n++)if(s[n].source.id==e&&s[n].target.id==t){s.splice(n,1);break}g()},this.removeallLinks=function(){s.splice(0,s.length),g()},this.removeAllNodes=function(){a.splice(0,s.length),g()},this.addLink=function(e,t,n){s.push({source:r(e),target:r(t),weight:n}),g()};var r=function(e){for(var t in a)if(a[t].id===e)return a[t]},i=function(e){for(var t=0;t<a.length;t++)if(a[t].id==e)return t},c=d3.scale.category20(),d=d3.select(e).append("svg:svg").classed("svg-container",!0).attr("perserveAspectRatio","xMinYMin meet").attr("viewBox","0 0 350 600").classed("svg-content-responsive",!0).append("svg:g"),o=d3.layout.force().charge(800).gravity(.2).friction(.2).linkDistance(80),a=o.nodes(),s=o.links();d.append("g").attr("class","links"),d.append("g").attr("class","nodes");var g=function(){var e=d.selectAll(".links").selectAll(".link").data(s,function(e){if(0<e.weight)return e.source.id+"-"+e.target.id});e.enter().append("line").attr("id",function(e){if(0<e.weight)return e.source.id+"-"+e.target.id}).attr("stroke-width",function(e){if(0<e.weight)return e.weight/10*2}).attr("stroke",function(e){return c(e.weight/10*2)}).attr("class","link"),e.append("title").text(function(e){return e.value});var n=d.selectAll("g.node").style("opacity",1).data(a,function(e){if(0<e.weight)return e.id}),r=function(e,t){return linkedByIndex[e.index+","+t.index]},t=n.enter().append("g").attr("class","node").on("dblclick",function(){if(0===toggle){var t=d3.select(this).node().__data__;n.style("opacity",function(e){return r(t,e)|r(e,t)?1:0}),d3.selectAll(".link").style("opacity",function(e){return e.source===t||e.target===t?1:0}),toggle=1}else n.style("opacity",1),e.style("opacity",1),toggle=0}).call(o.drag);t.append("svg:circle").attr("id",function(e){return"Node;"+e.id}).attr("class","nodeStrokeClass").attr("fill",function(e){return 0===e.value?"rgb(68, 136, 62)":c(10*e.value)}),t.append("svg:text").attr("class","textClass").attr("x",24).attr("y",".81em").attr("fill","black").text(function(e){if(0<e.weight)return e.id}),d3.selectAll("circle").attr("r",function(e){return(e.weight||0)/5+.2}),linkedByIndex={};for(var i=0;i<a.length;i++)linkedByIndex[i+","+i]=1;s.forEach(function(e){0<e.weight&&(linkedByIndex[e.source.index+","+e.target.index]=1)}),n.exit().remove(),o.on("tick",function(){n.attr("transform",function(e){return"translate("+e.x+","+e.y+")"}),e.attr("x1",function(e){return e.source.x}).attr("y1",function(e){return e.source.y}).attr("x2",function(e){return e.target.x}).attr("y2",function(e){return e.target.y})}),o.gravity(.01).charge(-100).friction(.01).linkDistance(function(e){return 120}).size([350,300]).start()};g()}function drawGraphBE(){var t=new MyGraph("#graph-container");d3.csv("nodes.csv").row(function(e){t.addNode(e.name,e.value)}).get(),document.getElementById("cr1").checked&&d3.csv("linksBE.csv").row(function(e){0<e.weight&&t.addLink(e.source,e.target,e.weight)}).get(),document.getElementById("cr2").checked&&d3.csv("linksBE.csv").row(function(e){5!=e.weight&&4!=e.weight||t.addLink(e.source,e.target,e.weight)}).get(),document.getElementById("cr3").checked&&d3.csv("linksBE.csv").row(function(e){5!==e.weight&&4!==e.weight&&3!==e.weight&&2!==e.weight||t.addLink(e.source,e.target,e.weight)}).get(),keepNodesOnTop()}function drawGraphFE(){var t=new MyGraph("#graph-container");d3.csv("nodes.csv").row(function(e){t.addNode(e.name,e.value)}).get(),document.getElementById("cr1").checked&&d3.csv("linksFE.csv").row(function(e){0<e.weight&&t.addLink(e.source,e.target,e.weight)}).get(),document.getElementById("cr2").checked&&d3.csv("linksFE.csv").row(function(e){5!==e.weight&&4!==e.weight||t.addLink(e.source,e.target,e.weight)}).get(),document.getElementById("cr3").checked&&d3.csv("linksFE.csv").row(function(e){5!==e.weight&&4!==e.weight&&3!==e.weight&&2!==e.weight||t.addLink(e.source,e.target,e.weight)}).get(),keepNodesOnTop()}function drawGraphFS(){var t=new MyGraph("#graph-container");d3.csv("nodes.csv").row(function(e){t.addNode(e.name,e.value)}).get(),document.getElementById("cr1").checked&&d3.csv("linksFS.csv").row(function(e){0<e.weight&&t.addLink(e.source,e.target,e.weight)}).get(),document.getElementById("cr2").checked&&d3.csv("linksFS.csv").row(function(e){5!==e.weight&&4!==e.weight||t.addLink(e.source,e.target,e.weight)}).get(),document.getElementById("cr3").checked&&d3.csv("linksFS.csv").row(function(e){5!==e.weight&&4!==e.weight&&3!==e.weight&&2!==e.weight||t.addLink(e.source,e.target,e.weight)}).get(),keepNodesOnTop()}function keepNodesOnTop(){$(".nodeStrokeClass").each(function(e){var t=this.parentNode;t.parentNode.appendChild(t)}),d3.selectAll("circle").attr("r",function(e){return e.weight})}function addNodes(){document.getElementById("tr1").checked&&(d3.select("svg").remove(),drawGraphBE()),document.getElementById("tr2").checked&&(d3.select("svg").remove(),drawGraphFE()),document.getElementById("tr3").checked&&(d3.select("svg").remove(),drawGraphFS())}$(function(){$("[data-action]").click(function(){window[$(this).attr("data-action")]()})}),document.getElementById("tr1").checked=!0,document.getElementById("cr1").checked=!0,drawGraphBE();