Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
D3.js Easing Checker
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Easing Test</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<script>
var dataset = ["linear", "quad", "cubic", "sin", "exp", "circle", "elastic", "back", "bounce"]
width = 960,
height = 500,
xPadding = 300,
yPadding = 30,
r = 20;
var svg = d3.select("body").append("svg")
.attr({
width: width,
height: height
});
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.attr({
x: xPadding,
y: function(d, i){ return i * (height/dataset.length) + yPadding; },
dx: -100,
dy: 5,
"font-size": 18
})
.style("text-anchor", "middle")
.text(function(d){ return d; });
svg.selectAll("line")
.data(dataset)
.enter()
.append("line")
.attr({
x1: xPadding,
y1: function(d, i){ return i * (height/dataset.length) + yPadding; },
x2: width-xPadding,
y2: function(d, i){ return i * (height/dataset.length) + yPadding; },
stroke: "darkorange"
})
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("class", function(d){ return d; })
.attr({
cx: xPadding,
cy: function(d, i){ return i * (height/dataset.length) + yPadding; },
r: r,
fill: "orange"
})
.on("mouseover", function(d){
d3.select(this).attr("fill", "green");
})
.on("mouseout", function(d){
d3.select(this).attr("fill", "orange");
})
.on("click", function(d){
d3.select(this)
.transition()
.duration(1000)
.ease(d)
.attr("cx", width-xPadding)
.each("end", function(){
d3.select(this)
.transition()
.delay(500)
.duration(500)
.attr({
cx: xPadding
})
})
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment