Last active
June 23, 2017 14:41
-
-
Save Mavromatika/58445b1f4c0c3b1e7506259eef1aa6b3 to your computer and use it in GitHub Desktop.
Bug
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <style> | |
| .exampleDiv { | |
| position: absolute; | |
| border-radius: 50%; | |
| /* background-color: deeppink;*/ | |
| background-position : center; | |
| border : 1px solid black; | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .exampleDiv h4 { text-align: center; font-size: 100%;} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="examples-container"></div> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script | |
| src="https://code.jquery.com/jquery-3.2.1.min.js" | |
| integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" | |
| crossorigin="anonymous"></script> | |
| <script> | |
| $(document).ready(function(){ | |
| var realW = $(window).width(), | |
| realH = $(window).height() * 0.8; | |
| var graphe = makeGraphDiv().w(realW).h(realH); | |
| d3.select(".examples-container").datum([ | |
| {title:"I"}, | |
| {title:"just"}, | |
| {title:"want"}, | |
| {title:"you"}, | |
| {title:"to"}, | |
| {title:"know"}, | |
| {title:"I"}, | |
| {title:"can"}, | |
| {title:"see"}, | |
| {title:"through"}, | |
| {title:"your"}, | |
| {title:"masks"} | |
| ]).call(graphe); | |
| function makeGraphDiv(){ | |
| var width = 10, | |
| height = 10, | |
| margin = {top: 10, right: 10, bottom: 10, left: 10}, | |
| wIn = width - margin.left - margin.right, | |
| hIn = height - margin.top - margin.bottom, | |
| radius = {min : 60, max: 120}; | |
| function my(selection){ | |
| selection.each(function(data){ | |
| /* Add other attributes to the data array's elements */ | |
| data.forEach(function(d,i){ | |
| d.r = radius.min; | |
| d.id = i; | |
| }); | |
| /* Create the force simulation */ | |
| var simulation = d3.forceSimulation(data) | |
| .alphaTarget(0) | |
| .velocityDecay(0.2) | |
| .force("collide", d3.forceCollide().radius(function(d){return d.r}).strength(0.5).iterations(5)) | |
| .force("x", d3.forceX().x(wIn/2).strength(0.05)) | |
| .force("y", d3.forceY().y(hIn/2).strength(0.05)) | |
| .on("tick",ticked); | |
| var container = d3.select(this); | |
| container.style("height",realH + "px"); | |
| /* Append divs to the parent container */ | |
| var circles = container.selectAll("div") | |
| .data(data) | |
| .enter() | |
| .append("div") | |
| .attr("class","exampleDiv") | |
| .style("height", function(d){return d.r*2 + "px";}) | |
| .style("width", function(d){return d.r*2 + "px";}) | |
| .html(function(d){return "<h4>" + d.title + "</h4>";}); | |
| /* This is a lone div to test if the transition works */ | |
| container.append("div") | |
| .attr("class","exampleDiv") | |
| .style("height",radius.min*2 + "px") | |
| .style("width",radius.min*2 + "px") | |
| .style("background-color","pink") | |
| .style("transform",function(d){return "translate(" + (400 - radius.min) +"px" + ","+ (400-radius.min)+"px"+")";}) | |
| .on("mouseenter",function(d){ | |
| d3.select(this).transition().duration(300) | |
| .style("height",radius.max*2 + "px") | |
| .style("width", radius.max*2 + "px") | |
| .style("transform",function(d){return "translate(" + (400-radius.max) +"px" + ","+ (400-radius.max)+"px"+")";}); | |
| }) | |
| .on("mouseleave",function(d){ | |
| d3.select(this).transition().duration(300) | |
| .style("height",radius.min*2 + "px") | |
| .style("width", radius.min*2 + "px") | |
| .style("transform",function(d){return "translate(" + (400-radius.min) +"px" + ","+ (400-radius.min)+"px"+")";}); | |
| }); | |
| function ticked(){ | |
| circles.style("transform",function(d){return "translate(" + (d.x-d.r) +"px" + ","+ (d.y-d.r)+"px"+")";}); | |
| } | |
| /* Interaction */ | |
| circles.on("mouseenter",function(d){ | |
| d.r = radius.max; | |
| /* This should smoothly translate the div to the north-west while making it grow */ | |
| d3.select(this).transition().duration(300) | |
| .style("height",d.r*2 + "px") | |
| .style("width", d.r*2 + "px") | |
| .style("transform",function(d){return "translate(" + (d.x-d.r) +"px" + ","+ (d.y-d.r)+"px"+")";}); | |
| simulation.force("collide", d3.forceCollide().radius(function(d){return d.r * 1}).strength(0.5).iterations(5)) | |
| .alpha(0.2).restart(); | |
| }).on("mouseleave",function(d){ | |
| d.r = radius.min; | |
| d3.select(this).transition().duration(300) | |
| .style("height",d.r*2 + "px") | |
| .style("width", d.r*2 + "px") | |
| .style("transform",function(d){return "translate(" + (d.x-d.r) +"px" + ","+ (d.y-d.r)+"px"+")";}); | |
| simulation.force("collide", d3.forceCollide().radius(function(d){return d.r * 1}).strength(0.5).iterations(5)) | |
| .alpha(0.2).restart(); | |
| }); | |
| }); | |
| } | |
| my.w = function(v){ | |
| if (!arguments.length) return width; | |
| width = v; | |
| wIn = width - margin.left - margin.right; | |
| return my; | |
| } | |
| my.h = function(v){ | |
| if (!arguments.length) return height; | |
| height = v; | |
| hIn = height - margin.top - margin.bottom; | |
| return my; | |
| } | |
| return my; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment