d3.js学习11

单元素动画transition().duration(duration)

var body = d3.select("body"),
	duration = 5000;

	body.append("div")
		.classed("box",true)
		.style("background-color","#e9967a")
	.transition()
	.duration(duration)
		.style("background-color","#add8e6")
		.style("margin-left","600px")
		.style("width","100px")
		.style("height","100px");

css

.box {
    width: 200px;
    height: 200px;
    margin: 40px;
    float: left;
    text-align: center;
    border: #969696 solid thin;
    padding: 5px;
}

宽度高度降低，水平平移，颜色变化。

多元素动画