帮酷LOGO
0 0 评论
  • 显示原文与译文双语对照的内容
文章标签:Select  transit  选择  Animated  Transition  animate  Transitions  
Animated transitions for D3 selections.

  • 源代码名称:d3-transition
  • 源代码网址:http://www.github.com/d3/d3-transition
  • d3-transition源代码文档
  • d3-transition源代码下载
  • Git URL:
    git://www.github.com/d3/d3-transition.git
  • Git Clone代码到本地:
    git clone http://www.github.com/d3/d3-transition
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/d3/d3-transition
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
  • d3-transition

    转换是一个选择 -like接口,用于对DOM的更改进行动画处理。 转换顺利地将DOM从当前状态插入到所需的目标状态,而不是应用变更。

    要应用转换,请选择 elements,call 选择 selection,然后进行所需的更改。 例如:

    d3.select("body")
    . transition()
    . style("background-color", "red");

    转换支持大多数选择方法,但不支持所有方法;例如必须在转换开始之前添加 elements元素或者绑定数据。 在转换结束时,为方便移除元素提供了操作符,便于删除元素。

    为了计算中间状态,过渡利用了各种在interpolators环境中构建的。 颜色数字和转换自动检测。 同时还检测到带有嵌入数字的字符串,这与许多样式的和路径相同。 要指定自定义插入,请使用 转换。attrTween转换 transition styletween或者转换。

    安装

    如果你使用 NPM,npm install d3-transition。 否则,下载最新版本的。 你也可以直接从 d3js.org 加载,或者作为一个独立库,或者作为D3 4.0的一部分。 支持 AMD,CommonJS和香草环境。 在vanilla中,导出了一个 d3 全局:

    <scriptsrc="https://d3js.org/d3-color.v1.min.js"></script>
    <scriptsrc="https://d3js.org/d3-dispatch.v1.min.js"></script>
    <scriptsrc="https://d3js.org/d3-ease.v1.min.js"></script>
    <scriptsrc="https://d3js.org/d3-interpolate.v1.min.js"></script>
    <scriptsrc="https://d3js.org/d3-selection.v1.min.js"></script>
    <scriptsrc="https://d3js.org/d3-timer.v1.min.js"></script>
    <scriptsrc="https://d3js.org/d3-transition.v1.min.js"></script>
    <script>var transition =d3.transition();</script>

    在浏览器中尝试 d3-transition。

    API参考

    选择元素

    转换是从选择通过 选择 derived转换派生的。 还可以使用 d3.transition 在文档 root 元素上创建转换。

    # selection.transition( [name] ) <>

    在给定的子对象选择列表上返回一个新的转换,它的名称为指定的 。 如果未指定名称,则使用 null。 新的转换只与相同名称的其他转换唯一。

    如果名称是转换实例,则返回的转换具有与指定的转换相同的id和 NAME。 如果选定元素上已经存在具有相同id的转换,则将为该元素返回现有转换。 否则,从每个选定元素的最近祖先上的相同id的现有转换继承返回转换的计时。 因此,这个方法可以用来同步多个选择之间的转换,或者为特定元素选择一个转换,并修改它的配置。 例如:

    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");

    如果在选定的node 或者它的祖先( 例如如果转换已经结束,那么。 ) 上没有找到指定的转换,则使用默认计时参数;但是,在将来的版本中,可能会更改该参数,以引发错误。 请参见 #59

    # selection.interrupt( [name] ) <>

    如果有指定的名称,则中断所选元素上指定的名称的活动转换,并取消所有挂起的转换( 如果有的话)。 如果未指定 NAME,则使用 null。

    中断元素上的转换对任何后代元素上的转换没有任何影响。 例如轴转换由轴元素( 刻度线。刻度线。域路径。等)的子元素的多个独立的同步过渡构成。 ) 要中断轴转换,必须中断子进程:

    selection.selectAll("*").interrupt();

    通用选择器*,选择所有子代元素。 如果你还想中断元素本身,请执行以下操作:

    selection.interrupt().selectAll("*").interrupt();

    # d3.interrupt(node [, name] ) <>

    如果有指定的名称,则中断指定的node 名称在指定的上的活动转换,并取消所有具有指定名称的转换( 如果有的话)。 如果未指定 NAME,则使用 null。 请参见 选择。

    # d3.transition( [name] ) <>

    在 root 元素 document.documentElement 上返回一个新的转换,使用指定的名称。 如果未指定名称,则使用 null。 新的转换只与相同 NAME的其他转换互斥。 名称也可能是一个转换实例;请参见选择 transition。 这里方法等效于:

    d3.selection()
    . transition(name)

    这个函数也可以用来测试转换( instanceof d3.transition ) 或者扩展转换 Prototype。

    # transition.select(selector) <>

    对于每个选定元素,如果选择了指定的子元素,则选择 MATCHES的第一个子元素( 如果有),并返回所得到的。 可以将选择器指定为选择器字符串或者函数。 在函数中,对每个选定元素进行计算,按当前的基准 d 和索引 i 进行传递,并将 this 上下文作为当前DOM元素进行计算。 新的转换具有与这里转换相同的for,NAME 和时序;但是,如果在选定元素上已经存在相同的转换。

    这里方法等价于通过 转换转换选择选择选择,选择creating选择selection选择selection选择transition转换:转换

    transition
    . selection()
    . select(selector)
    . transition(transition)

    # transition.selectAll(selector) <>

    对于每个选定元素,选择指定的子元素( 如果有),并在结果选择中返回转换的所有子代元素( 如果有)。 可以将选择器指定为选择器字符串或者函数。 在函数中,对每个选定元素进行计算,按当前的基准 d 和索引 i 进行传递,并将 this 上下文作为当前DOM元素进行计算。 新的转换具有与这里转换相同的for,NAME 和时序;但是,如果在选定元素上已经存在相同的转换。

    This的方法是通过 转换导出选择。选择,通过选择创建一个subselection选择选择selection选择。转换:

    transition
    . selection()
    . selectAll(selector)
    . transition(transition)

    # transition.filter(filter) <>

    对于每个选择元素,只选择 MATCH 指定过滤的元素,并在结果选择上返回一个过渡。 可以将筛选器指定为选择器字符串或者函数。 在函数中,对每个选定元素进行计算,按当前的基准 d 和索引 i 进行传递,并将 this 上下文作为当前DOM元素进行计算。 新的转换具有与这里转换相同的for,NAME 和时序;但是,如果在选定元素上已经存在相同的转换。

    这里方法等价于通过 转换导出选择的选择选择通过选择创建一个subselection选择选择filter选择:转换,然后创建新的转换:

    transition
    . selection()
    . filter(filter)
    . transition(transition)

    # transition.merge(other) <>

    将这里转换与指定的转换merging返回一个新的转换,该转换必须具有与该转换相同的id。 返回的转换具有相同的组数。相同的父节点。相同的NAME 和与这里转换相同的id。 如果在这个转换中缺少任何缺少的( 空) 元素,则会从该元素中填充相应的元素( 如果存在的话)。

    这个方法等价于通过 转换deriving转换选择。选择,合并选择,合并从selection选择,合并selection选择,转换子对象的转换。转换子对象。

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

    # transition.transition() <>

    返回与这里转换相同的选定元素上的新转换,计划在这里转换结束时启动。 新转换继承与转换时间相等的引用时间,以及它的延迟持续时间。 新的转换还继承了这种转换。持续时间和缓和模式的转换。 这里方法可以用于调度链转换序列。 例如:

    d3.selectAll(".apple")
    . transition() // First fade to green.. style("fill", "green")
    . transition() // Then red.. style("fill", "red")
    . transition() // Wait one second. Then brown, and remove.. delay(1000)
    . style("fill", "brown")
    . remove();

    每个转换的延迟相对于它以前的转换。 因此,在上述示例中,苹果将在最后一次转换到brown之前保持红色一秒钟。

    # transition.selection() <>

    返回与这里转换对应的选择

    # d3.active(node [, name] ) <>

    如果有指定的名称,则返回指定的node 上的活动转换( 具有指定的名称名称)。 如果没有指定名称,则使用 null。 如果指定的node 上没有这样的活动转换,则返回 null。 这里方法对于创建链式转换非常有用。 例如要启动disco模式:

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

    有关示例,请参阅链接的过渡

    修改元素

    使用转换方法选择元素并创建转换后,使用转换方法。使用转换方法转换来影响文档内容。

    # transition.attr(name, value) <>

    对于每个选定元素,为具有指定名称的属性指定属性tween指定目标值。 tween的起始值是在转换开始时属性的值。 可以常量或者函数的形式指定目标值。 在执行这里命令时,将立即计算每个选定元素的值,并按当前的基准 d 和索引 i 将它的传递给当前的DOM元素。

    如果目标值为空,则在转换开始时移除该属性。 否则,根据目标值的类型选择一个插值器,使用以下算法:

    要应用不同的插补器,请使用 转换。attrTween

    # transition.attrTween(name [, factory] ) <>

    指定为factory工厂 factory指定属性 tween tween指定属性tween名称tween指定的interpolator factory工厂 factory。 插入内插工厂是返回插值器的函数;当转换开始时,将对每个选定元素进行计算,并按当前的DOM元素作为当前的DOM元素计算工厂。 然后,为转换的每个帧调用返回的内插,依次通过缓解的时间( 通常为 range ),通常在range范围内。 最后,插值器的返回值将用于设置属性值。 插入器必须返回字符串。 要在转换开始时移除属性,请使用 transition转换 ;在转换结束时删除属性,使用转换 listen listen listen listen event

    指定的工厂为空,则移除指定的名称的以前分配的属性( 如果有的话)。 指定了工厂,如果不存在该属性,则返回具有指定名称的当前插补工厂的属性,或者定义为未定义的interpolator。

    例如要将填充属性从红色插入到蓝色,请执行以下操作:

    transition.attrTween("fill", function() {
     returnd3.interpolateRgb("red", "blue");
    });

    或者从当前填充中插入到蓝色,如 的过渡::

    transition.attrTween("fill", function() {
     returnd3.interpolateRgb(this.getAttribute("fill"), "blue");
    });

    或者应用自定义彩虹插值器:

    transition.attrTween("fill", function() {
     returnfunction(t) {
     return"hsl("+ t *360+",100%,50%)";
     };
    });

    对于指定自定义插入器( 如理解 SVG路径)的自定义插入器,这里方法非常有用。 一个有用的技术是数据插值,其中使用 d3.interpolateObject 插入两个数据值,然后使用( 比如说,用形状 ) 值计算新属性值。

    # transition.style(name, value [, priority] ) <>

    对于每个选定元素,使用指定的优先级指定样式tween样式tween指定的目标值指定的目标值。 当转换开始时,的起始值是样式值的内联,否则为它的计算值。 可以常量或者函数的形式指定目标值。 在执行这里命令时,将立即计算每个选定元素的值,并按当前的基准 d 和索引 i 将它的传递给当前的DOM元素。

    如果目标值为空,则在转换开始时删除样式。 否则,根据目标值的类型选择一个插值器,使用以下算法:

    要应用不同的插补器,请使用 转换。styletween

    # transition.styleTween(name [, factory[, priority] ])) <>

    指定为factory工厂 factory指定样式 tween tween指定样式 tween tween指定名称 factory factory factory工厂 factory。 插入内插工厂是返回插值器的函数;当转换开始时,将对每个选定元素进行计算,并按当前的DOM元素作为当前的DOM元素计算工厂。 然后,为转换的每个帧调用返回的内插,依次通过缓解的时间( 通常为 range ),通常在range范围内。 最后,插值器的返回值将用于设置样式值,以指定的优先级。 插入器必须返回字符串。 要在转换开始时删除样式,请使用 转换 style style transition transition transition transition transition transition transition transition transition listen listen listen event event event event

    指定的工厂为空,则删除指定的名称中以前指定的样式,如果有。 指定了工厂,则返回具有指定名称的当前插值工厂的样式,如果不存在这里名称,则返回未定义的。

    例如要将填充样式从红色插入蓝色,请执行以下操作:

    transition.styleTween("fill", function() {
     returnd3.interpolateRgb("red", "blue");
    });

    或者,从当前填充中插入到蓝色,如 转换。样式:

    transition.styleTween("fill", function() {
     returnd3.interpolateRgb(this.style.fill, "blue");
    });

    或者应用自定义彩虹插值器:

    transition.styleTween("fill", function() {
     returnfunction(t) {
     return"hsl("+ t *360+",100%,50%)";
     };
    });

    这种方法用于指定自定义插值器,例如使用数据插值,其中使用 d3.interpolateObject 插入两个数据值,然后使用结果值计算新样式值。

    # transition.text(value) <>

    对于每个选定元素,将文本内容设置为指定的目标值当转换开始时。 可以将值指定为常数或者函数。 在执行这里命令时,将立即计算每个选定元素的值,并按当前的基准 d 和索引 i 将它的传递给当前的DOM元素。 然后使用函数值的返回来设置元素内容的每个文本。 空值将清除内容。

    要插入文本而不是在开始时设置它,请使用 转换,或者追加替换元素和交叉淡入淡出不透明性(例如 )。 默认情况下不插入文本,因为它通常是不需要的。

    # transition.remove() <>

    在每个选定元素中,只要元素没有其他活动或者挂起的转换,就删除元素when元素。 如果元素有其他活动或者挂起的转换,则不执行任何操作。

    # transition.tween(name [, value] ) <>

    对于每个选定元素,使用指定的名称指定值指定 tween。 值必须被指定为返回函数的函数。 当转换开始时,每个选定的元素都会按当前基准 d 和索引 i 计算值函数,并将 this 上下文作为当前的DOM元素。 然后为转换的每个帧调用返回函数,依次通过缓解的时间( 通常为 range ),通常是在范围 [0, 1 ] 中。 指定的值为空,则移除以前指定的名称,如果有的话。

    例如要将填充属性插入到蓝色,如 转换:

    transition.tween("attr.fill", function() {
     var node =this, i =d3.interpolateRgb(node.getAttribute("fill"), "blue");
     returnfunction(t) {
     node.setAttribute("fill", i(t));
     };
    });

    对于指定自定义插值器或者执行副作用( 比如对滚动偏移量的动画) 来说,这个方法很有用。

    定时

    转换的缓解延迟和持续时间可以配置。 例如每个元素延迟都可以用于对元素的重新排序重新排序,从而提高了感知的效率。 有关建议,请参见统计数据图形中的动画转换。

    # transition.delay( [value] ) <>

    对于每个选择元素,将转换延迟设置为指定的值( 毫秒)。 可以将值指定为常数或者函数。 在执行这里命令时,将立即计算每个选定元素的值,并按当前的基准 d 和索引 i 将它的传递给当前的DOM元素。 函数值的返回被用来设置元素延迟的每个转换。 如果没有指定延迟,则默认为零。

    如果未指定值,则返回转换中第一个( 非空) 元素的延迟的当前值。 只有当你知道转换只包含一个元素时,这通常是有用的。

    将延迟设置为索引 i的倍数是一种方便的方法,可以在一组元素中交错转换。 例如:

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

    当然,你也可以计算延迟作为数据的函数,或者在计算基于索引的延迟之前,将选择的内容排序。

    # transition.duration( [value] ) <>

    对于每个选择元素,将转换持续时间设置为指定的值毫秒 in。 可以将值指定为常数或者函数。 在执行这里命令时,将立即计算每个选定元素的值,并按当前的基准 d 和索引 i 将它的传递给当前的DOM元素。 函数值的返回被用来设置元素持续时间的每个转换。 如果未指定持续时间,则默认为 250毫秒。

    如果未指定值,则返回转换中第一个( 非空) 元素的持续时间的当前值。 只有当你知道转换只包含一个元素时,这通常是有用的。

    # transition.ease( [value] ) <>

    指定所有选定元素的转换缓动函数。 值必须指定为函数。 如果 t t t = = 0 and 1 easing easing easing easing函数应该返回 0. 如果未指定缓动函数,则默认为 d3.easeCubic

    如果未指定值,则返回转换中第一个( 非空) 元素的当前缓动函数。 只有当你知道转换只包含一个元素时,这通常是有用的。

    控制流

    对于高级用法,转换提供自定义控制流的方法。

    # transition.on(typenames [, listener] ) <>

    添加或者移除针对指定事件的每个选定元素的侦听器 typenames。 typenames 是以下字符串事件类型之一:

    • start - 当转换开始时。
    • end - 当过渡结束时。
    • interrupt - 当转换中断时。

    请参见的过渡生命周期,了解更多。 Note these selection selection选择和 selection选择 on on native native selection

    类型可以跟随一个句点( . ) 和 NAME ;可选的NAME 允许注册多个回调,如 start.foostart.bar。 若要指定多个 typenames,请使用空格分隔 typenames,例如 interrupt end 或者 start.foo start.bar

    当在选定的node 上调度指定的转换事件时,将调用指定的侦听器转换元素,并将当前的数据 d 和索引 i 作为当前的DOM元素传递给它。 侦听器总是查看它的元素的最新基准,但是索引是选择的属性并且在分配侦听器时被修复。

    在先前为相同的元素注册了事件监听器时,在选择的元素上,在添加新侦听器之前将删除旧侦听器。 若要移除侦听器,请将null作为侦听器传递。 如果要删除给定 NAME的所有侦听器,请将null作为侦听器和 .foo 作为 typename,将 foo 指定为 NAME typename remove typename typename typename typename typename。

    在指定的事件元素中,如果没有指定侦听器,则返回指定事件的当前分配侦听器( 在第一个( 非空) 选择元素上),如果有的话。 如果指定了多个 typenames,则返回第一个匹配的侦听器。

    # transition.each(function) <>

    对每个选定元素调用指定的函数,并使用当前DOM元素的this 上下文传递当前的基准 d 和索引 i。 这里方法可以用于为每个选定元素调用任意代码,并且对于创建上下文以同时访问父数据和子数据非常有用。 选择等效。每个选项。

    # transition.call(function [, arguments...] ) <>

    调用指定的函数一次,传递这个转换以及任何可选的命令行参数。 返回这里转换。这相当于手动调用函数,但方便方法链接。 例如要在可以重用函数中设置多个属性,请执行以下操作:

    functioncolor(transition, fill, stroke) {
     transition
    . style("fill", fill)
    . style("stroke", stroke);
    }

    现在说:

    d3.selectAll("div").transition().call(color, "red", "blue");

    这等效于:

    color(d3.selectAll("div").transition(), "red", "blue");

    选择等效。调用

    # transition.empty() <>

    如果这里转换不包含任何( 非空) 元素,则返回 true。 与 选择。empty

    # transition.nodes() <>

    返回这里转换中所有( 非空) 元素的array。 与 选择 nodes节点

    # transition.node() <>

    返回这里转换中的第一个( 非空) 元素。 如果转换是空的,则返回空。 与 选择 Equivalent节点等效。

    # transition.size() <>

    返回这里转换中的元素总数。 与 选择 size大小相同。

    转换的生命周期

    Immediately transition转换,selection,transition,过渡,style转换,duration转换,style转换,style转换,style转换,style转换,style转换,style转换,style转换,style转换。 specify ( 比如转换. attr )。attrTween and和 transition转换的方法,如。transition和转换的方法,必须延迟,直到转换开始。

    创建后,在当前帧的末尾或者下一帧的末尾,将调度转换。 这里时,延迟和 start 事件侦听器可以能不再更改;尝试执行这里操作会引发消息"太晚": 已经计划的"( 或者如果转移结束了)"转换没有找到")。

    当转换之后,如果有相同的元素,就会中断同一个元素上的同一个 NAME的活动转换( 如果有,将一。 ( 注意,启动时发生中断,而不是创建,因这里即使零延迟转换也不会立即中断活动转换: 旧的转变得到了最后的一帧。 在开始转换之前,启动转换还取消相同元素上相同 NAME 上的所有等待转换。 转换然后将一个 start 事件分派给已经注册的侦听器。 这是转换的最后一个时刻: 启动后,转换。小区和侦听器的时间可以能不再更改;试图这样做会引发消息"太晚": 已经启动"( 或者如果转移结束了)"转换未找到")。 转换在启动后立即初始化它的tweens。

    在帧中,转换开始,但是在重新开始之后,所有的转换都开始了这个帧,转换调用它的小程序第一次。 批处理by初始化,通常涉及从DOM读取,通过避免交错DOM读写来提高性能。

    每个帧都是活动的,它使用一个 eased eased eased eased -value。 在每个帧内,转换按照它的注册的顺序调用它的tweens。

    当过渡结束时,它用( 非 eased )的t -value invokes调用它的tweens time。 然后,它将 end 事件分派给已经注册的侦听器。 这是可以检查转换的最后一个时刻: 结束后,将从元素中删除转换,并将它的配置销毁。 如果在中断或者取消时,转换的配置也被破坏。尝试检查转换之后的转换会引发错误消息"找不到转换"。



    文章标签:Select  animate  Animated  Transition  transit  选择  Transitions  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语