Created
May 5, 2017 08:17
-
-
Save wnghdcjfe/b7cb2e1f479b9998a5fe3d7c5eb9fbdd to your computer and use it in GitHub Desktop.
D3 V3 | simple force layout
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
| { | |
| "nodes": [{ | |
| "name": "주홍철", | |
| "group": 1 | |
| }, { | |
| "name": "박종선", | |
| "group": 1 | |
| }, { | |
| "name": "연제호", | |
| "group": 1 | |
| }, { | |
| "name": "최재영", | |
| "group": 1 | |
| }, { | |
| "name": "최주원", | |
| "group": 1 | |
| }, { | |
| "name": "양영주", | |
| "group": 2 | |
| }, { | |
| "name": "초지", | |
| "group": 2 | |
| }, { | |
| "name": "설효정", | |
| "group": 2 | |
| }, { | |
| "name": "최이백", | |
| "group": 3 | |
| }, { | |
| "name": "오규영", | |
| "group": 3 | |
| }, { | |
| "name": "조용덕", | |
| "group": 3 | |
| }], | |
| "links": [{ | |
| "source": 0, | |
| "target": 1 | |
| },{ | |
| "source": 0, | |
| "target": 2 | |
| },{ | |
| "source": 0, | |
| "target": 3 | |
| },{ | |
| "source": 0, | |
| "target": 4 | |
| },{ | |
| "source": 1, | |
| "target": 2 | |
| },{ | |
| "source": 1, | |
| "target": 3 | |
| },{ | |
| "source": 1, | |
| "target": 4 | |
| },{ | |
| "source": 2, | |
| "target": 3 | |
| },{ | |
| "source": 2, | |
| "target": 4 | |
| },{ | |
| "source": 0, | |
| "target": 5 | |
| },{ | |
| "source": 5, | |
| "target": 6 | |
| },{ | |
| "source": 5, | |
| "target": 7 | |
| },{ | |
| "source": 0, | |
| "target": 8 | |
| },{ | |
| "source": 0, | |
| "target": 9 | |
| },{ | |
| "source": 0, | |
| "target": 10 | |
| },{ | |
| "source": 8, | |
| "target": 7 | |
| }] | |
| } |
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> | |
| .link { | |
| stroke: #ccc; | |
| } | |
| .node text { | |
| pointer-events: none; | |
| font: 10px sans-serif; | |
| } | |
| @font-face { | |
| font-family: 'overwatch'; | |
| src: url('fonts/koverwatch.woff2'); | |
| } | |
| </style> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 500 | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var force = d3.layout.force() | |
| .gravity(0.1) | |
| .distance(100) | |
| .charge(-700) | |
| .size([width, height]); | |
| var color = function (group) { | |
| if (group == 1) { | |
| return "#aaa" | |
| } else if (group == 2) { | |
| return "#fbc280" | |
| } else { | |
| return "#405275" | |
| } | |
| } | |
| d3.json("friends.json", function (error, json) { | |
| if (error) throw error; | |
| force | |
| .nodes(json.nodes) | |
| .links(json.links) | |
| .start(); | |
| var link = svg.selectAll(".link") | |
| .data(json.links) | |
| .enter().append("line") | |
| .attr("class", "link"); | |
| var node = svg.selectAll(".node") | |
| .data(json.nodes) | |
| .enter().append("g") | |
| .attr("class", "node") | |
| .call(force.drag); | |
| node.append('circle') | |
| .attr('r', 13) | |
| .attr('fill', function (d) { | |
| return color(d.group); | |
| }); | |
| node.append("text") | |
| .attr("dx", -18) | |
| .attr("dy", 8) | |
| .style("font-family", "overwatch") | |
| .style("font-size", "18px") | |
| .text(function (d) { | |
| return d.name | |
| }); | |
| 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("transform", function (d) { | |
| return "translate(" + d.x + "," + d.y + ")"; | |
| }); | |
| }); | |
| }); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment