This example creates a fixed network graph with dynamic labels using d3.js. The network layout and placement of the nodes and edges was calculated in Gephi and then exported as the graph.json file.
This was inspired from these gists by Mike Bostock: Force-Directed Graph, Multi-Foci Force Layout
| {"edges":[ | |
| {"source":6, "target":20}, | |
| {"source":12, "target":0}, | |
| {"source":23, "target":13}, | |
| {"source":3, "target":1}, | |
| {"source":7, "target":20}, | |
| {"source":25, "target":3}, | |
| {"source":4, "target":11}, | |
| {"source":16, "target":20}, | |
| {"source":9, "target":0}, | |
| {"source":25, "target":13}, | |
| {"source":16, "target":4}, | |
| {"source":4, "target":13}, | |
| {"source":5, "target":15}, | |
| {"source":4, "target":17}, | |
| {"source":9, "target":25}, | |
| {"source":4, "target":25}, | |
| {"source":16, "target":8}, | |
| {"source":6, "target":5}, | |
| {"source":6, "target":18}, | |
| {"source":4, "target":5}, | |
| {"source":9, "target":19}, | |
| {"source":9, "target":20}, | |
| {"source":4, "target":14}, | |
| {"source":9, "target":5}, | |
| {"source":4, "target":15}, | |
| {"source":12, "target":3}, | |
| {"source":0, "target":1}, | |
| {"source":9, "target":17}, | |
| {"source":17, "target":15}, | |
| {"source":23, "target":18}, | |
| {"source":16, "target":5}, | |
| {"source":4, "target":23}, | |
| {"source":24, "target":6}, | |
| {"source":9, "target":14}, | |
| {"source":16, "target":6} | |
| ], | |
| "nodes":[ | |
| {"y":134.324462891,"x":-113.536003113,"id":20,"label":"node1"}, | |
| {"y":51.229637146,"x":155.395904541,"id":25,"label":"node2"}, | |
| {"y":46.6591949463,"x":-207.792068481,"id":13,"label":"node3"}, | |
| {"y":27.60389328,"x":133.966064453,"id":2,"label":"node4"}, | |
| {"y":126.531860352,"x":-26.9523639679,"id":24,"label":"node5"}, | |
| {"y":163.070098877,"x":-86.976524353,"id":7,"label":"node6"}, | |
| {"y":-221.938049316,"x":-80.8975143433,"id":21,"label":"node7"}, | |
| {"y":52.953651428,"x":-95.7600021362,"id":4,"label":"node8"}, | |
| {"y":-12.805847168,"x":189.149490356,"id":12,"label":"node9"}, | |
| {"y":141.481781006,"x":-60.2801208496,"id":6,"label":"node10"}, | |
| {"y":-81.550979614,"x":112.394180298,"id":3,"label":"node11"}, | |
| {"y":23.1120529175,"x":225.898086548,"id":17,"label":"node12"}, | |
| {"y":-87.168624878,"x":-78.1010284424,"id":14,"label":"node13"}, | |
| {"y":65.189682007,"x":-212.771820068,"id":11,"label":"node14"}, | |
| {"y":-176.750244141,"x":58.5323791504,"id":1,"label":"node15"}, | |
| {"y":-52.795600891,"x":154.782455444,"id":0,"label":"node16"}, | |
| {"y":176.595153809,"x":30.1155319214,"id":8,"label":"node17"}, | |
| {"y":84.641799927,"x":185.32460022,"id":19,"label":"node18"}, | |
| {"y":-157.174133301,"x":-258.442382812,"id":10,"label":"node19"}, | |
| {"y":77.960739136,"x":53.8596191406,"id":9,"label":"node20"}, | |
| {"y":67.204818726,"x":-68.0021133423,"id":5,"label":"node21"}, | |
| {"y":50.07220459,"x":-2.34326410294,"id":18,"label":"node22"}, | |
| {"y":37.9620285034,"x":-138.772369385,"id":23,"label":"node23"}, | |
| {"y":94.446624756,"x":-48.3559761047,"id":16,"label":"node24"}, | |
| {"y":155.012207031,"x":-64.1417312622,"id":22,"label":"node25"}, | |
| {"y":21.2733154297,"x":110.682693481,"id":15,"label":"node26"} | |
| ]} |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .node circle { | |
| fill: rgb(168, 200, 248); | |
| stroke: grey; | |
| stroke-width: 1px; | |
| } | |
| .link { | |
| stroke: black; | |
| stroke-width: 1px; | |
| opacity: .2; | |
| } | |
| .label { | |
| font-family: Arial; | |
| font-size: 12px; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var width = 800, | |
| height = 500; | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| d3.json("graph.json", function(error, json){ | |
| var nodes = json.nodes.map(function(d){ | |
| return { | |
| 'index' : d.id, | |
| 'x' : d.x, | |
| 'y' : d.y, | |
| 'fixed': true, | |
| 'label' : d.label | |
| } | |
| }) | |
| var links = json.edges.map(function(d){ | |
| return { | |
| 'source': parseInt(d.source), | |
| 'target': parseInt(d.target) | |
| } | |
| }) | |
| var foci = [], | |
| labelNodes = []; | |
| for(var i=0; i < nodes.length; i++){ | |
| var center = {x: nodes[i].x, y: nodes[i].y} | |
| foci.push(center); | |
| center["label"] = nodes[i].label; | |
| center["index"] = nodes[i].index; | |
| labelNodes.push(center) | |
| }; | |
| var force = d3.layout.force() | |
| .nodes(nodes) | |
| .links(links) | |
| force.start(); | |
| var force2 = d3.layout.force() | |
| .nodes(labelNodes) | |
| .links([]) | |
| .gravity(0) | |
| .charge(-3) | |
| .on("tick", tick) | |
| force2.start(); | |
| svg.append("g") | |
| .attr("class", "network") | |
| .attr("transform", "translate(430, 270)"); | |
| var network = svg.selectAll("g.network") | |
| network.append("g") | |
| .selectAll("line.link") | |
| .data(links).enter() | |
| .append("line") | |
| .attr("class", "link") | |
| var link = svg.selectAll(".link") | |
| network.append("g") | |
| .attr("class", "nodes") | |
| .selectAll("g.node") | |
| .data(force.nodes()) | |
| .enter() | |
| .append("svg:g") | |
| .attr("class", "node") | |
| var node = svg.selectAll("g.node") | |
| node.append("svg:circle") | |
| .attr("r", function(d) { return 5; }) | |
| .attr("cx", function(d) { return d.x; }) | |
| .attr("cy", function(d) { return d.y; }); | |
| network.append("g").attr("class", "labels") | |
| .selectAll("g.label") | |
| .data(labelNodes) | |
| .enter() | |
| .append("svg:text") | |
| .attr("class", "label") | |
| .text(function(d) {return d.label;}) | |
| var label = svg.selectAll(".labels text") | |
| function tick(test) { | |
| var k = .1* test.alpha; | |
| labelNodes.forEach(function(d){ | |
| d.y += (labelNodes[d.index].y - d.y) * k; | |
| d.x += (labelNodes[d.index].x - d.x) * k; | |
| }); | |
| label.attr("x", function(d) { return d.x; }) | |
| .attr("y", 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; }); | |
| } | |
| }); | |
| </script> | |
| </body> |