美文网首页
第九章 D3的过渡transition

第九章 D3的过渡transition

作者: Doter | 来源:发表于2017-09-04 21:38 被阅读0次

ease

设置过渡方式

d3-transition

简单的例子

//1
rects.transition()
        .duration(130)
        .attr('y', function (d, i) { return 200 - y(d) })
        .attr('height', function (d, i) { return y(d) })
//2
var t = d3.transition()
    .duration(750)
    .ease(d3.easeLinear);

d3.selectAll(".apple").transition(t)
    .style("fill", "red");

d3.selectAll(".orange").transition(t)
    .style("fill", "orange");

interrupt([name])

中断选择集上活动的名为name的过渡。如果name所表示的过渡还没有开始,则也不用开始了。如果没有指定name,则使用null。

filter(filter)

对过渡集中的元素进行过滤

merge(other)

合并两个过渡集,等价

transition
  .selection()
  .merge(other.selection())
  .transition(transition)

d3.active(node[, name])

返回指定节点上名为name的活动的过渡。如果没有指定name则使用null。这个方法可以方便的创建链式过渡,比如创建一个循环disco过渡:

d3.selectAll("circle").transition()
    .delay(function(d, i) { return i * 50; })
    .on("start", function repeat() {
        d3.active(this)
            .style("fill", "red")
          .transition()
            .style("fill", "green")
          .transition()
            .style("fill", "blue")
          .transition()
            .on("start", repeat);
      });

delay()

设置或获取延迟时间

transition.delay(function(d, i) { return i * 10; });

后注

一旦创建好了一个过渡效果,就不能再改变了
如果一个元素的一个属性正在进行过渡,此时又开始了这个属性的另一个过渡,则之前的过渡会被终止。

相关文章

  • 第九章 D3的过渡transition

    ease 设置过渡方式 d3-transition 简单的例子 interrupt([name]) 中断选择集上活...

  • CSS之过渡,形变转换及动画

    过渡(transition) transition:要过渡的属性 时间 运动的形式 何时开始 transition...

  • 06-D3.js过渡动画

    D3提供了4个方法用于实现图形的过渡 transition 图形变化前后的状态(形状、位置、颜色等) durati...

  • CSS动画相关

    1.transition动画过渡属性 transition-property 设置过渡属性 transition-...

  • transition过渡,transform变换

    transition 过渡transition:transition-property transition-du...

  • 动画

    过渡动画transition属性简介 transition是网页上的变化的逐渐过渡效果 例:transition:...

  • 动画

    过渡动画transition属性简介 transition是网页上的变化的逐渐过渡效果 例:transition:...

  • CSS3动画

    transition transition(过渡)用法:

  • animation动画

    1、transition: 平衡过渡 transition :过渡效果的 CSS 属性的名称 完成过渡效果需要多少...

  • CSS Transition

    过渡 transition transition属性用于设置元素的过渡动画交互效果 transition是一个简写...

网友评论

      本文标题:第九章 D3的过渡transition

      本文链接:https://www.haomeiwen.com/subject/pthyjxtx.html