Created
October 12, 2017 03:51
-
-
Save onlyzs89/7a6a90944b0a3c4c44e1f9832381aff4 to your computer and use it in GitHub Desktop.
This file contains 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> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>D3 Test</title> | |
| <style> | |
| </style> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
| <script src="https://d3js.org/d3.v4.js"></script> | |
| </head> | |
| <body> | |
| <svg> | |
| <p style="position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;text-align:center;vertical-align:middle;font-size:100px;color:grey;opacity:0.3;z-index:-1;">Click!</p> | |
| </svg> | |
| <script> | |
| //window_load(); | |
| //window.onresize = window_load; | |
| var width = window.innerWidth*0.9; | |
| var height = window.innerHeight*0.9; | |
| var svg = d3.select("svg").attr("width", width).attr("height", height); | |
| var rectData=[{"x":0,"y":0,"width":width,"height":height}]; | |
| var color20 = d3.scaleOrdinal(d3.schemeCategory20); | |
| var rect = svg.selectAll("rect") | |
| .data(rectData) | |
| .enter() | |
| .append("rect") | |
| .attr("x",function(d){return d.x;}) | |
| .attr("y",function(d){return d.y;}) | |
| .attr("width",function(d){return d.width;}) | |
| .attr("height",function(d){return d.height;}) | |
| .attr("class", "overlay") | |
| .style("fill", "transparent"); | |
| var dragmoveCallback = function(d){ | |
| d.fx = d3.event.x; | |
| d.fy = d3.event.y; | |
| }; | |
| var dragendCallback = function(d){ | |
| if (!d3.event.active) force.alphaTarget(0); | |
| force.force("collide", d3.forceCollide().radius(function(d){ | |
| return d.r + 0.5; | |
| })) | |
| d3.select(this).attr("r",function(){return d.r;}) | |
| d.fx = null; | |
| d.fy = null; | |
| }; | |
| var dragstartCallback = function(d){ | |
| var a = d3.select(this).attr("cx"); | |
| if (!d3.event.active) force.alphaTarget(0.3).restart(); | |
| force.force("collide", d3.forceCollide().radius(function(d){ | |
| if(a == d.x){ | |
| return d.r + 50; | |
| } | |
| return d.r + 0.5; | |
| })) | |
| d3.select(this).attr("r",function(){return 30;}) | |
| d.fx = d.x; | |
| d.fy = d.y; | |
| }; | |
| var drag = d3.drag() | |
| .on("start", dragstartCallback) | |
| .on("drag", dragmoveCallback) | |
| .on("end", dragendCallback) | |
| var nodes=[]; | |
| const forceX = d3.forceX(width / 2) | |
| const forceY = d3.forceY(height / 2) | |
| var force = d3.forceSimulation() | |
| .force("x", forceX) | |
| .force("y", forceY) | |
| .force("collide", d3.forceCollide().radius(function(d){ | |
| return d.r + 0.5; | |
| }).iterations(5)) | |
| .nodes(nodes).on("tick", ticked); | |
| function ticked(e) { | |
| svg.selectAll("circle") | |
| .attr("cx", function(d) { return d.x; }) | |
| .attr("cy", function(d) { return d.y; }); | |
| }; | |
| rect.on("mousedown", function(){ | |
| var node = {"r":Math.floor(Math.random()*(20-10)+10),"x":d3.mouse(this)[0],"y":d3.mouse(this)[1]}; | |
| nodes.push(node); | |
| var circle = svg.selectAll("circle") | |
| .data(nodes) | |
| .enter().append("circle") | |
| .attr("r", function(d) { return d.r; }) | |
| .attr("cx", function(d) { return d.x; }) | |
| .attr("cy", function(d) { return d.y; }) | |
| .attr("fill",color20(Math.floor(Math.random()*100))) | |
| .call(drag); | |
| force.nodes(nodes).on("tick", ticked).alphaTarget(0.3).restart(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment