Created
October 11, 2016 19:40
-
-
Save DDDgfx/612c0e5f5453fdc54a97c4539090b0cb to your computer and use it in GitHub Desktop.
Add and Remove
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> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style type="text/css"> | |
| body { | |
| margin: 0px; | |
| } | |
| .artboard { | |
| fill: none; | |
| stroke: #000000; | |
| stroke-opacity: 0; | |
| } | |
| .mat { | |
| stroke-width: .5px; | |
| fill: white; | |
| stroke: black; | |
| stroke-opacity: .1; | |
| } | |
| .thing { | |
| fill-opacity: .25; | |
| } | |
| </style> | |
| <body> | |
| </body> | |
| <script> | |
| // set margins | |
| var margin = { | |
| top: 50, | |
| right: 50, | |
| bottom: 50, | |
| left: 50 | |
| }; | |
| //find height and width of the window: | |
| var w = window, | |
| d = document, | |
| e = d.documentElement, | |
| g = d.getElementsByTagName('body')[0], | |
| vX = w.innerWidth || e.clientWidth || g.clientWidth, | |
| vY = w.innerHeight || e.clientHeight || g.clientHeight; | |
| console.log(vX + " : " + vY); | |
| //set height and width of the SVG. | |
| var width = vX - margin.left - margin.right, | |
| height = vY - margin.top - margin.bottom; | |
| //the top level SVG. | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom); | |
| //an optional margin border.. | |
| svg.append("rect") | |
| .attr("height", vY) | |
| .attr("width", vX) | |
| .attr("class", "artboard") | |
| .style("stroke-width", function() { | |
| return margin.top * 2; | |
| }); | |
| //the mat, a group where the drawing happens. | |
| var mat = svg.append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| //add a simple borderfor that group. | |
| var canvas = mat.append("rect") | |
| .attr("height", height) | |
| .attr("width", width) | |
| .attr("class", "mat"); | |
| //add a circle when the group is clicked | |
| canvas.on("click", function() { | |
| var clickX = d3.mouse(this)[0]; | |
| var clickY = d3.mouse(this)[1]; | |
| console.log(clickX + " " + clickY); | |
| mat.append("circle") | |
| .classed("thing", true) | |
| .attr("cx", clickX) | |
| .attr("cy", clickY) | |
| .attr("r", 0) | |
| .transition() | |
| .duration(2000) | |
| .ease(d3.easeExpOut) | |
| .attr("r", 50); | |
| d3.selectAll(".thing") | |
| .on("click", function() { | |
| this.remove(); | |
| }); | |
| }); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment