Skip to content

Instantly share code, notes, and snippets.

@veltman

veltman/index.html

Last active July 3, 2016 10:45
Show Gist options
  • Save veltman/344418d9602a29825d63 to your computer and use it in GitHub Desktop.
Save veltman/344418d9602a29825d63 to your computer and use it in GitHub Desktop.
Download ZIP
Interrupt transition
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
button {
font-size: 36px;
}
circle {
stroke: none;
fill: #de1e3d;
}
</style>
<body>
<button>Stop</button>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.min.js"></script>
<script>
var width = 960,
height = 400;
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height);
var dots = svg.selectAll("circle")
.data(randomArray(100))
.enter()
.append("circle")
.attr("r",10)
.attr("cx",function(d){
return d.x1 * width;
})
.attr("cy",function(d){
return d.y1 * height;
});
var destination = setter()
.style("fill","#0e88ba")
.attr("r",function(d){ return 30 * d.y2; })
.attr("cx",function(d){ return width * d.x2; })
.attr("cy",function(d){ return height * d.y2; })
.set();
dots.transition()
.duration(5000)
.ease("linear")
.call(destination)
.each("interrupt",destination);
d3.select("button").on("click",function(){
dots.interrupt();
});
function randomArray(size) {
return d3.range(size).map(function(){
return {
x1: Math.random(),
x2: Math.random(),
y1: Math.random(),
y2: Math.random()
};
});
}
function setter() {
var s,
props = [];
function add(type) {
return function(key,value) {
props.push({type: type, key: key, value: value});
return s;
};
}
function set() {
return function(selection) {
if (!(selection instanceof d3.selection || selection instanceof d3.transition)) {
selection = d3.select(this);
}
props.forEach(function(prop){
selection[prop.type](prop.key,prop.value);
});
};
}
return s = {
style: add("style"),
attr: add("attr"),
set: set
};
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment