Built with blockbuilder.org
Created
February 1, 2018 21:43
-
-
Save kdenny/8a78bc30e2b00dce3234e0d0d859b9fe to your computer and use it in GitHub Desktop.
draggable network w labels
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .node { | |
| stroke: #fff; | |
| stroke-width: 1.5px; | |
| } | |
| .link { | |
| stroke: #999; | |
| } | |
| body {font-family: graphik,Helvetica,Arial,sans-serif;} | |
| </style> | |
| <body> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var width = 1500, | |
| height = 950; | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| d3.json("data_objects2.json", function(error, graph) { | |
| if (error) throw error; | |
| graph.links.forEach(function(d) { | |
| d.source = graph.nodes[d.source]; | |
| d.target = graph.nodes[d.target]; | |
| }); | |
| var link = svg.append("g") | |
| .attr("class", "link") | |
| .selectAll("line") | |
| .data(graph.links) | |
| .enter().append("line") | |
| .style("stroke", "#aaa") | |
| .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; }); | |
| var node = svg.append("g") | |
| .attr("class", "node") | |
| .selectAll("circle") | |
| .data(graph.nodes) | |
| .enter().append("circle") | |
| .attr("r", 20) | |
| .style("fill", function(d) { return d.color; }) | |
| .style("stroke", "#969696") | |
| .style("stroke-width", "1px") | |
| .attr("cx", function(d) { return d.x; }) | |
| .attr("cy", function(d) { return d.y; }) | |
| .call(d3.drag().on("drag", dragged)); | |
| var label = svg.append("g") | |
| .attr("class", "labels") | |
| .selectAll("text") | |
| .data(graph.nodes) | |
| .enter().append("text") | |
| .attr("class", "label") | |
| .attr("x", function(d) { return d.x+15; }) | |
| .attr("y", function (d) { return d.y; }) | |
| .style("font-size", "20px").style("fill", "#000000") | |
| .text(function(d) { return d.id; }); | |
| function dragged(d) { | |
| d.x = d3.event.x, d.y = d3.event.y; | |
| d3.select(this).attr("cx", d.x).attr("cy", d.y); | |
| link.filter(function(l) { return l.source === d; }).attr("x1", d.x).attr("y1", d.y); | |
| link.filter(function(l) { return l.target === d; }).attr("x2", d.x).attr("y2", d.y); | |
| label.filter(function(l) { return l === d; }).attr("x", d.x+15).attr("y", d.y); | |
| } | |
| }); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment