Created
October 29, 2015 03:37
-
-
Save kurotanshi/33d614d5f4ab46b18bd0 to your computer and use it in GitHub Desktop.
d3 元氣彈
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"> | |
<title></title> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<style type="text/css"> | |
html, body, svg { | |
width: 100%; height: 100%; padding: 0; margin: 0; | |
} | |
#reset{ font-size: 1.2em; padding: 10px; margin-bottom: 1em; } | |
</style> | |
</head> | |
<body> | |
<button id="reset">reset</button> | |
<svg></svg> | |
<script> | |
var svg = d3.select('svg'); | |
var dataSet = d3.range(100); | |
var wRange = 960, hRange = 500; | |
var circle = svg.selectAll("circle") | |
.data(dataSet) | |
.enter() | |
.append('circle') | |
.attr({ | |
'width': 100, | |
'height': 30, | |
'fill': 'blue', | |
'fill-opacity': 0.25, | |
'r': function(){ return ( Math.random() * 20 ) + 5; }, | |
'cx':function(){ return Math.floor(Math.random() * wRange); }, | |
'cy':function(){ return Math.floor(Math.random() * hRange); } | |
}); | |
var drag = d3.behavior.drag() | |
.on("drag", function(){ | |
circle.transition() | |
.delay(function(d,i){ return i * 150; }) | |
.attr({ | |
'cx':d3.event.x, | |
'cy':d3.event.y, | |
'r': function(d, i){ return i * 1.1; } | |
}); | |
circle.on(".drag", null); | |
}); | |
circle.call(drag); | |
d3.select("#reset").on('click', function(){ | |
circle.transition() | |
.attr({ | |
'r': function(){ return ( Math.random() * 20 ) + 5; }, | |
'cx':function(){ return Math.floor(Math.random() * wRange);}, | |
'cy':function(){ return Math.floor(Math.random() * hRange);} | |
}); | |
circle.call(drag); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment