d3.ease(type[, argument...])

https://github.com/mbostock/d3/wiki/Transitions#d3_ease

此處過場時間設定 2 秒: .transition().duration(2000)
若不指定,則會以 cubic-in-out

svg.selectAll("rect").data(dataset).transition().duration(2000).ease("linear")
	.attr("y", function(d) {
		return h - yScale(d);
	}).attr("height", function(d) {
		return yScale(d);
	}).attr("fill", function(d) {
		return "rgba(" + (85 + d * 3) + ",66,54,1)";
	});
svg.selectAll("text").data(dataset).transition().duration(2000).ease("linear")
	.text(function(d) {
		return d;
	}).attr("x", function(d, i) {
		return xScale(i) + xScale.rangeBand() / 2;
	}).attr("y", function(d) {
		return h - yScale(d) + 15;
	});

.ease("linear")

.ease("poly(k)")

.ease("quad")

.ease("cubic")

.ease("sin")

.ease("exp")

.ease("elastic(a, p)")

.ease("back(s)")

.ease("bounce")

Go to top