| license: gpl-3.0 | |
| height: 600 |
A quick adaptation of Mike Bostock's force-directed graph showing character co-occurence in Les Misérables. In this version, the character names are displayed. This is accomplished by wrapping both circles and text svg components within a group svg component.
Compare to the original diagram by Mike Bostock.
forked from heybignick's block: D3.js v4 Force Directed Graph with Labels
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .links line { | |
| stroke: #999; | |
| stroke-opacity: 0.6; | |
| } | |
| .nodes circle { | |
| stroke: #fff; | |
| stroke-width: 1.5px; | |
| } | |
| text { | |
| font-family: sans-serif; | |
| font-size: 10px; | |
| } | |
| </style> | |
| <script type="text/javascript" language="javascript" src="miserables.json"></script> | |
| <button type="button" name="Location">Location</button> | |
| <button></button> | |
| <button></button> | |
| <svg width="960" height="600"></svg> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var svg = d3.select("svg"), | |
| width = +svg.attr("width"), | |
| height = +svg.attr("height"); | |
| var color = d3.scaleOrdinal(d3.schemeCategory20); | |
| var simulation = d3.forceSimulation() | |
| .force("link", d3.forceLink().id(function(d) { return d.id; })) | |
| .force("charge", d3.forceManyBody()) | |
| .force("center", d3.forceCenter(width / 2, height / 2)); | |
| d3.json("miserables.json", function(error, graph) { | |
| if (error) throw error; | |
| var link = svg.append("g") | |
| .attr("class", "links") | |
| .selectAll("line") | |
| .data(graph.links) | |
| .enter().append("line") | |
| .attr("stroke-width", function(d) { return Math.sqrt(d.value); }); | |
| var node = svg.append("g") | |
| .attr("class", "nodes") | |
| .selectAll("g") | |
| .data(graph.nodes) | |
| .enter().append("g") | |
| var circles = node.append("circle") | |
| .attr("r", 5) | |
| .attr("fill", function(d) { return color(d.group); }) | |
| .call(d3.drag() | |
| .on("start", dragstarted) | |
| .on("drag", dragged) | |
| .on("end", dragended)); | |
| var lables = node.append("text") | |
| .text(function(d) { | |
| return d.id; | |
| }) | |
| .attr('x', 6) | |
| .attr('y', 3); | |
| node.append("title") | |
| .text(function(d) { return d.id; }); | |
| simulation | |
| .nodes(graph.nodes) | |
| .on("tick", ticked); | |
| simulation.force("link") | |
| .links(graph.links); | |
| function ticked() { | |
| 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("transform", function(d) { | |
| return "translate(" + d.x + "," + d.y + ")"; | |
| }) | |
| } | |
| }); | |
| function dragstarted(d) { | |
| if (!d3.event.active) simulation.alphaTarget(0.3).restart(); | |
| d.fx = d.x; | |
| d.fy = d.y; | |
| } | |
| function dragged(d) { | |
| d.fx = d3.event.x; | |
| d.fy = d3.event.y; | |
| } | |
| function dragended(d) { | |
| if (!d3.event.active) simulation.alphaTarget(0); | |
| d.fx = null; | |
| d.fy = null; | |
| } | |
| </script> |
| { | |
| "nodes": [ | |
| {"sortBy": "Location", "id": "site"}, | |
| {"sortBy": "Location", "id": "C"}, | |
| {"sortBy": "Location", "id": "Building"}, | |
| {"sortBy": "Location", "id": "D"}, | |
| {"sortBy": "Location", "id": "Area"}, | |
| {"sortBy": "Location", "id": "Device"} | |
| ], | |
| "links": [ | |
| {"source": "site", "target": "C", "value": 1}, | |
| {"source": "site", "target": "Building", "value": 1}, | |
| {"source": "site", "target": "D", "value": 1}, | |
| {"source": "Building", "target": "Area", "value": 1}, | |
| {"source": "Area", "target": "Device", "value": 1} | |
| ] | |
| } |