Created
May 5, 2017 08:13
-
-
Save wnghdcjfe/c2b04ee8430afa32ce76596daa4d8123 to your computer and use it in GitHub Desktop.
D3 V4 | 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.v4.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.forceSimulation() | |
| .force("charge", d3.forceManyBody().strength(-700).distanceMin(100).distanceMax(1000)) | |
| .force("link", d3.forceLink().id(function(d) { return d.index })) | |
| .force("center", d3.forceCenter(width / 2, height / 2)) | |
| .force("y", d3.forceY(0.001)) | |
| .force("x", d3.forceX(0.001)) | |
| var color = function (group) { | |
| if (group == 1) { | |
| return "#aaa" | |
| } else if (group == 2) { | |
| return "#fbc280" | |
| } else { | |
| return "#405275" | |
| } | |
| } | |
| function dragstarted(d) { | |
| if (!d3.event.active) force.alphaTarget(0.5).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) force.alphaTarget(0.5); | |
| d.fx = null; | |
| d.fy = null; | |
| } | |
| d3.json("friends.json", function (error, json) { | |
| if (error) throw error; | |
| force | |
| .nodes(json.nodes) | |
| .force("link").links(json.links) | |
| 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(d3.drag() | |
| .on("start", dragstarted) | |
| .on("drag", dragged) | |
| .on("end", dragended)); | |
| 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