d3js学习——6.过渡和动画

过渡：让项目从一个状态转换到另一个状态

transition()：可以用于所有选择器，并启动转换过程，支持大多选择方法——attr(),style()等，不支持 append()和data()方法(需要在transition之前调用)，还提供了特定于转换的方法——duration(), ease()

d3.select("svg")
    .transition()
    .style("background-color", "black")
    .duration(4000);

// 背景颜色从白色变为浅灰色，然后变为灰色
d3.select("h1")
    .transition()
    .style("background-color", "lightblue")
    .duration(3000)
    .transition()
    .style("background-color", "gray")
    .duration(2000);
// 指定 RGB 颜色代码值
  d3.select("h1")
    .transition()
    .style("color", "rgb(0,150,120)")
    .duration(5000);

D3内部插值方法——d3.interpolate(a,b)——支持的插值类型：数值，颜色，字符串

delay(number)方法允许再一段时间之后进行转换

d3.select("body")
    .transition()
    .delay(200)
// 监控过渡开始事件
    .on("start", function () {
      d3.select(this).style("color", "green");
    })
    .delay(1000)
    .style("color", "red");