pax_global_header00006660000000000000000000000064131063672700014517gustar00rootroot0000000000000052 comment=328cc9a5705ceecadfcf7da558bbf0f6b9e23d9d d3-transition-1.1.0/000077500000000000000000000000001310636727000142145ustar00rootroot00000000000000d3-transition-1.1.0/.eslintrc000066400000000000000000000001471310636727000160420ustar00rootroot00000000000000parserOptions: sourceType: module extends: "eslint:recommended" rules: no-cond-assign: 0 d3-transition-1.1.0/.gitignore000066400000000000000000000001001310636727000161730ustar00rootroot00000000000000*.sublime-workspace .DS_Store build/ node_modules npm-debug.log d3-transition-1.1.0/.npmignore000066400000000000000000000000361310636727000162120ustar00rootroot00000000000000*.sublime-* build/*.zip test/ d3-transition-1.1.0/LICENSE000066400000000000000000000056321310636727000152270ustar00rootroot00000000000000Copyright (c) 2010-2015, Michael Bostock All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. * The name Michael Bostock may not be used to endorse or promote products derived from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL MICHAEL BOSTOCK BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. TERMS OF USE - EASING EQUATIONS Open source under the BSD License. Copyright 2001 Robert Penner All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: - Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. - Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. - Neither the name of the author nor the names of contributors may be used to endorse or promote products derived from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. d3-transition-1.1.0/README.md000066400000000000000000001066111310636727000155000ustar00rootroot00000000000000# d3-transition A transition is a [selection](https://github.com/d3/d3-selection)-like interface for animating changes to the DOM. Instead of applying changes instantaneously, transitions smoothly interpolate the DOM from its current state to the desired target state over a given duration. To apply a transition, select elements, call [*selection*.transition](#selection_transition), and then make the desired changes. For example: ```js d3.select("body") .transition() .style("background-color", "red"); ``` Transitions support most selection methods (such as [*transition*.attr](#transition_attr) and [*transition*.style](#transition_style) in place of [*selection*.attr](https://github.com/d3/d3-selection#selection_attr) and [*selection*.style](https://github.com/d3/d3-selection#selection_style)), but not all methods are supported; for example, you must [append](https://github.com/d3/d3-selection#selection_append) elements or [bind data](https://github.com/d3/d3-selection#joining-data) before a transition starts. A [*transition*.remove](#transition_remove) operator is provided for convenient removal of elements when the transition ends. To compute intermediate state, transitions leverage a variety of [built-in interpolators](https://github.com/d3/d3-interpolate). [Colors](https://github.com/d3/d3-interpolate#interpolateRgb), [numbers](https://github.com/d3/d3-interpolate#interpolateNumber), and [transforms](https://github.com/d3/d3-interpolate#interpolateTransform) are automatically detected. [Strings](https://github.com/d3/d3-interpolate#interpolateString) with embedded numbers are also detected, as is common with many styles (such as padding or font sizes) and paths. To specify a custom interpolator, use [*transition*.attrTween](#transition_attrTween), [*transition*.styleTween](#transition_styleTween) or [*transition*.tween](#transition_tween). ## Installing If you use NPM, `npm install d3-transition`. Otherwise, download the [latest release](https://github.com/d3/d3-transition/releases/latest). You can also load directly from [d3js.org](https://d3js.org), either as a [standalone library](https://d3js.org/d3-transition.v1.min.js) or as part of [D3 4.0](https://github.com/d3/d3). AMD, CommonJS, and vanilla environments are supported. In vanilla, a `d3` global is exported: ```html ``` [Try d3-transition in your browser.](https://tonicdev.com/npm/d3-transition) ## API Reference * [Selecting Elements](#selecting-elements) * [Modifying Elements](#modifying-elements) * [Timing](#timing) * [Control Flow](#control-flow) * [The Life of a Transition](#the-life-of-a-transition) ### Selecting Elements Transitions are derived from [selections](https://github.com/d3/d3-selection) via [*selection*.transition](#selection_transition). You can also create a transition on the document root element using [d3.transition](#transition). # selection.transition([name]) [<>](https://github.com/d3/d3-transition/blob/master/src/selection/transition.js "Source") Returns a new transition on the given *selection* with the specified *name*. If a *name* is not specified, null is used. The new transition is only exclusive with other transitions of the same name. If the *name* is a [transition](#transition) instance, the returned transition has the same id and name as the specified transition. If a transition with the same id already exists on a selected element, the existing transition is returned for that element. Otherwise, the timing of the returned transition is inherited from the existing transition of the same id on the nearest ancestor of each selected element. Thus, this method can be used to synchronize a transition across multiple selections, or to re-select a transition for specific elements and modify its configuration. For example: ```js 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"); ``` If the specified *transition* is not found on a selected node or its ancestors (such as if the transition [already ended](#the-life-of-a-transition)), the default timing parameters are used; however, in a future release, this will likely be changed to throw an error. See [#59](https://github.com/d3/d3-transition/issues/59). # selection.interrupt([name]) [<>](https://github.com/d3/d3-transition/blob/master/src/selection/interrupt.js "Source") Interrupts the active transition of the specified *name* on the selected elements, and cancels any pending transitions with the specified *name*, if any. If a name is not specified, null is used. Interrupting a transition on an element has no effect on any transitions on any descendant elements. For example, an [axis transition](https://github.com/d3/d3-axis) consists of multiple independent, synchronized transitions on the descendants of the axis [G element](https://www.w3.org/TR/SVG/struct.html#Groups) (the tick lines, the tick labels, the domain path, *etc.*). To interrupt the axis transition, you must therefore interrupt the descendants: ```js selection.selectAll("*").interrupt(); ``` The [universal selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors), `*`, selects all descendant elements. If you also want to interrupt the G element itself: ```js selection.interrupt().selectAll("*").interrupt(); ``` # d3.interrupt(node[, name]) [<>](https://github.com/d3/d3-transition/blob/master/src/interrupt.js "Source") Interrupts the active transition of the specified *name* on the specified *node*, and cancels any pending transitions with the specified *name*, if any. If a name is not specified, null is used. See also [*selection*.interrupt](#selection_interrupt). # d3.transition([name]) [<>](https://github.com/d3/d3-transition/blob/master/src/transition/index.js#L29 "Source") Returns a new transition on the root element, `document.documentElement`, with the specified *name*. If a *name* is not specified, null is used. The new transition is only exclusive with other transitions of the same name. The *name* may also be a [transition](#transition) instance; see [*selection*.transition](#selection_transition). This method is equivalent to: ```js d3.selection() .transition(name) ``` This function can also be used to test for transitions (`instanceof d3.transition`) or to extend the transition prototype. # transition.select(selector) [<>](https://github.com/d3/d3-transition/blob/master/src/transition/select.js "Source") For each selected element, selects the first descendant element that matches the specified *selector* string, if any, and returns a transition on the resulting selection. The *selector* may be specified either as a selector string or a function. If a function, it is evaluated for each selected element, in order, being passed the current datum `d` and index `i`, with the `this` context as the current DOM element. The new transition has the same id, name and timing as this transition; however, if a transition with the same id already exists on a selected element, the existing transition is returned for that element. This method is equivalent to deriving the selection for this transition via [*transition*.selection](#transition_selection), creating a subselection via [*selection*.select](https://github.com/d3/d3-selection#selection_select), and then creating a new transition via [*selection*.transition](#selection_transition): ```js transition .selection() .select(selector) .transition(transition) ``` # transition.selectAll(selector) [<>](https://github.com/d3/d3-transition/blob/master/src/transition/selectAll.js "Source") For each selected element, selects all descendant elements that match the specified *selector* string, if any, and returns a transition on the resulting selection. The *selector* may be specified either as a selector string or a function. If a function, it is evaluated for each selected element, in order, being passed the current datum `d` and index `i`, with the `this` context as the current DOM element. The new transition has the same id, name and timing as this transition; however, if a transition with the same id already exists on a selected element, the existing transition is returned for that element. This method is equivalent to deriving the selection for this transition via [*transition*.selection](#transition_selection), creating a subselection via [*selection*.selectAll](https://github.com/d3/d3-selection#selection_selectAll), and then creating a new transition via [*selection*.transition](#selection_transition): ```js transition .selection() .selectAll(selector) .transition(transition) ``` # transition.filter(filter) [<>](https://github.com/d3/d3-transition/blob/master/src/transition/filter.js "Source") For each selected element, selects only the elements that match the specified *filter*, and returns a transition on the resulting selection. The *filter* may be specified either as a selector string or a function. If a function, it is evaluated for each selected element, in order, being passed the current datum `d` and index `i`, with the `this` context as the current DOM element. The new transition has the same id, name and timing as this transition; however, if a transition with the same id already exists on a selected element, the existing transition is returned for that element. This method is equivalent to deriving the selection for this transition via [*transition*.selection](#transition_selection), creating a subselection via [*selection*.filter](https://github.com/d3/d3-selection#selection_filter), and then creating a new transition via [*selection*.transition](#selection_transition): ```js transition .selection() .filter(filter) .transition(transition) ``` # transition.merge(other) [<>](https://github.com/d3/d3-transition/blob/master/src/transition/merge.js "Source") Returns a new transition merging this transition with the specified *other* transition, which must have the same id as this transition. The returned transition has the same number of groups, the same parents, the same name and the same id as this transition. Any missing (null) elements in this transition are filled with the corresponding element, if present (not null), from the *other* transition. This method is equivalent to deriving the selection for this transition via [*transition*.selection](#transition_selection), merging with the selection likewise derived from the *other* transition via [*selection*.merge](https://github.com/d3/d3-selection#selection_merge), and then creating a new transition via [*selection*.transition](#selection_transition): ```js transition .selection() .merge(other.selection()) .transition(transition) ``` # transition.transition() [<>](https://github.com/d3/d3-transition/blob/master/src/transition/transition.js "Source") Returns a new transition on the same selected elements as this transition, scheduled to start when this transition ends. The new transition inherits a reference time equal to this transition’s time plus its [delay](#transition_delay) and [duration](#transition_duration). The new transition also inherits this transition’s name, duration, and [easing](#transition_ease). This method can be used to schedule a sequence of chained transitions. For example: ```js 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(); ``` The delay for each transition is relative to its previous transition. Thus, in the above example, apples will stay red for one second before the last transition to brown starts. # transition.selection() [<>](https://github.com/d3/d3-transition/blob/master/src/transition/selection.js "Source") Returns the [selection](https://github.com/d3/d3-selection#selection) corresponding to this transition. # d3.active(node[, name]) [<>](https://github.com/d3/d3-transition/blob/master/src/active.js "Source") Returns the active transition on the specified *node* with the specified *name*, if any. If no *name* is specified, null is used. Returns null if there is no such active transition on the specified node. This method is useful for creating chained transitions. For example, to initiate disco mode: ```js 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); }); ``` See [chained transitions](http://bl.ocks.org/mbostock/70d5541b547cc222aa02) for an example. ### Modifying Elements After selecting elements and creating a transition with [*selection*.transition](#selection_transition), use the transition’s transformation methods to affect document content. # transition.attr(name, value) [<>](https://github.com/d3/d3-transition/blob/master/src/transition/attr.js "Source") For each selected element, assigns the [attribute tween](#transition_attrTween) for the attribute with the specified *name* to the specified target *value*. The starting value of the tween is the attribute’s value when the transition starts. The target *value* may be specified either as a constant or a function. If a function, it is immediately evaluated for each selected element, in order, being passed the current datum `d` and index `i`, with the `this` context as the current DOM element. If the target value is null, the attribute is removed when the transition starts. Otherwise, an interpolator is chosen based on the type of the target value, using the following algorithm: 1. If *value* is a number, use [interpolateNumber](https://github.com/d3/d3-interpolate#interpolateNumber). 2. If *value* is a [color](https://github.com/d3/d3-color#color) or a string coercible to a color, use [interpolateRgb](https://github.com/d3/d3-interpolate#interpolateRgb). 3. Use [interpolateString](https://github.com/d3/d3-interpolate#interpolateString). To apply a different interpolator, use [*transition*.attrTween](#transition_attrTween). # transition.attrTween(name[, factory]) [<>](https://github.com/d3/d3-transition/blob/master/src/transition/attrTween.js "Source") If *factory* is specified and not null, assigns the attribute [tween](#transition_tween) for the attribute with the specified *name* to the specified interpolator *factory*. An interpolator factory is a function that returns an [interpolator](https://github.com/d3/d3-interpolate); when the transition starts, the *factory* is evaluated for each selected element, in order, being passed the current datum `d` and index `i`, with the `this` context as the current DOM element. The returned interpolator will then be invoked for each frame of the transition, in order, being passed the [eased](#transition_ease) time *t*, typically in the range [0, 1]. Lastly, the return value of the interpolator will be used to set the attribute value. The interpolator must return a string. (To remove an attribute at the start of a transition, use [*transition*.attr](#transition_attr); to remove an attribute at the end of a transition, use [*transition*.on](#transition_on) to listen for the *end* event.) If the specified *factory* is null, removes the previously-assigned attribute tween of the specified *name*, if any. If *factory* is not specified, returns the current interpolator factory for attribute with the specified *name*, or undefined if no such tween exists. For example, to interpolate the fill attribute from red to blue: ```js transition.attrTween("fill", function() { return d3.interpolateRgb("red", "blue"); }); ``` Or to interpolate from the current fill to blue, like [*transition*.attr](#transition_attr): ```js transition.attrTween("fill", function() { return d3.interpolateRgb(this.getAttribute("fill"), "blue"); }); ``` Or to apply a custom rainbow interpolator: ```js transition.attrTween("fill", function() { return function(t) { return "hsl(" + t * 360 + ",100%,50%)"; }; }); ``` This method is useful to specify a custom interpolator, such as one that understands [SVG paths](http://bl.ocks.org/mbostock/3916621). A useful technique is *data interpolation*, where [d3.interpolateObject](https://github.com/d3/d3-interpolate#interpolateObject) is used to interpolate two data values, and the resulting value is then used (say, with a [shape](https://github.com/d3/d3-shape)) to compute the new attribute value. # transition.style(name, value[, priority]) [<>](https://github.com/d3/d3-transition/blob/master/src/transition/style.js "Source") For each selected element, assigns the [style tween](#transition_styleTween) for the style with the specified *name* to the specified target *value* with the specified *priority*. The starting value of the tween is the style’s inline value if present, and otherwise its computed value, when the transition starts. The target *value* may be specified either as a constant or a function. If a function, it is immediately evaluated for each selected element, in order, being passed the current datum `d` and index `i`, with the `this` context as the current DOM element. If the target value is null, the style is removed when the transition starts. Otherwise, an interpolator is chosen based on the type of the target value, using the following algorithm: 1. If *value* is a number, use [interpolateNumber](https://github.com/d3/d3-interpolate#interpolateNumber). 2. If *value* is a [color](https://github.com/d3/d3-color#color) or a string coercible to a color, use [interpolateRgb](https://github.com/d3/d3-interpolate#interpolateRgb). 3. Use [interpolateString](https://github.com/d3/d3-interpolate#interpolateString). To apply a different interpolator, use [*transition*.styleTween](#transition_styleTween). # transition.styleTween(name[, factory[, priority]])) [<>](https://github.com/d3/d3-transition/blob/master/src/transition/styleTween.js "Source") If *factory* is specified and not null, assigns the style [tween](#transition_tween) for the style with the specified *name* to the specified interpolator *factory*. An interpolator factory is a function that returns an [interpolator](https://github.com/d3/d3-interpolate); when the transition starts, the *factory* is evaluated for each selected element, in order, being passed the current datum `d` and index `i`, with the `this` context as the current DOM element. The returned interpolator will then be invoked for each frame of the transition, in order, being passed the [eased](#transition_ease) time *t*, typically in the range [0, 1]. Lastly, the return value of the interpolator will be used to set the style value with the specified *priority*. The interpolator must return a string. (To remove an style at the start of a transition, use [*transition*.style](#transition_style); to remove an style at the end of a transition, use [*transition*.on](#transition_on) to listen for the *end* event.) If the specified *factory* is null, removes the previously-assigned style tween of the specified *name*, if any. If *factory* is not specified, returns the current interpolator factory for style with the specified *name*, or undefined if no such tween exists. For example, to interpolate the fill style from red to blue: ```js transition.styleTween("fill", function() { return d3.interpolateRgb("red", "blue"); }); ``` Or to interpolate from the current fill to blue, like [*transition*.style](#transition_style): ```js transition.styleTween("fill", function() { return d3.interpolateRgb(this.style.fill, "blue"); }); ``` Or to apply a custom rainbow interpolator: ```js transition.styleTween("fill", function() { return function(t) { return "hsl(" + t * 360 + ",100%,50%)"; }; }); ``` This method is useful to specify a custom interpolator, such as with *data interpolation*, where [d3.interpolateObject](https://github.com/d3/d3-interpolate#interpolateObject) is used to interpolate two data values, and the resulting value is then used to compute the new style value. # transition.text(value) [<>](https://github.com/d3/d3-transition/blob/master/src/transition/text.js "Source") For each selected element, sets the [text content](http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-textContent) to the specified target *value* when the transition starts. The *value* may be specified either as a constant or a function. If a function, it is immediately evaluated for each selected element, in order, being passed the current datum `d` and index `i`, with the `this` context as the current DOM element. The function’s return value is then used to set each element’s text content. A null value will clear the content. To interpolate text rather than to set it on start, use [*transition*.tween](#transition_tween) ([for example](http://bl.ocks.org/mbostock/7004f92cac972edef365)) or append a replacement element and cross-fade opacity ([for example](http://bl.ocks.org/mbostock/f7dcecb19c4af317e464)). Text is not interpolated by default because it is usually undesirable. # transition.remove() [<>](https://github.com/d3/d3-transition/blob/master/src/transition/remove.js "Source") For each selected element, [removes](https://github.com/d3/d3-selection#selection_remove) the element when the transition ends, as long as the element has no other active or pending transitions. If the element has other active or pending transitions, does nothing. # transition.tween(name[, value]) [<>](https://github.com/d3/d3-transition/blob/master/src/transition/tween.js "Source") For each selected element, assigns the tween with the specified *name* with the specified *value* function. The *value* must be specified as a function that returns a function. When the transition starts, the *value* function is evaluated for each selected element, in order, being passed the current datum `d` and index `i`, with the `this` context as the current DOM element. The returned function is then invoked for each frame of the transition, in order, being passed the [eased](#transition_ease) time *t*, typically in the range [0, 1]. If the specified *value* is null, removes the previously-assigned tween of the specified *name*, if any. For example, to interpolate the fill attribute to blue, like [*transition*.attr](#transition_attr): ```js transition.tween("attr.fill", function() { var node = this, i = d3.interpolateRgb(node.getAttribute("fill"), "blue"); return function(t) { node.setAttribute("fill", i(t)); }; }); ``` This method is useful to specify a custom interpolator, or to perform side-effects, say to animate the [scroll offset](http://bl.ocks.org/mbostock/1649463). ### Timing The [easing](#transition_ease), [delay](#transition_delay) and [duration](#transition_duration) of a transition is configurable. For example, a per-element delay can be used to [stagger the reordering](http://bl.ocks.org/mbostock/3885705) of elements, improving perception. See [Animated Transitions in Statistical Data Graphics](http://vis.berkeley.edu/papers/animated_transitions/) for recommendations. # transition.delay([value]) [<>](https://github.com/d3/d3-transition/blob/master/src/transition/delay.js "Source") For each selected element, sets the transition delay to the specified *value* in milliseconds. The *value* may be specified either as a constant or a function. If a function, it is immediately evaluated for each selected element, in order, being passed the current datum `d` and index `i`, with the `this` context as the current DOM element. The function’s return value is then used to set each element’s transition delay. If a delay is not specified, it defaults to zero. If a *value* is not specified, returns the current value of the delay for the first (non-null) element in the transition. This is generally useful only if you know that the transition contains exactly one element. Setting the delay to a multiple of the index `i` is a convenient way to stagger transitions across a set of elements. For example: ```js transition.delay(function(d, i) { return i * 10; }); ``` Of course, you can also compute the delay as a function of the data, or [sort the selection](https://github.com/d3/d3-selection#selection_sort) before computed an index-based delay. # transition.duration([value]) [<>](https://github.com/d3/d3-transition/blob/master/src/transition/duration.js "Source") For each selected element, sets the transition duration to the specified *value* in milliseconds. The *value* may be specified either as a constant or a function. If a function, it is immediately evaluated for each selected element, in order, being passed the current datum `d` and index `i`, with the `this` context as the current DOM element. The function’s return value is then used to set each element’s transition duration. If a duration is not specified, it defaults to 250ms. If a *value* is not specified, returns the current value of the duration for the first (non-null) element in the transition. This is generally useful only if you know that the transition contains exactly one element. # transition.ease([value]) [<>](https://github.com/d3/d3-transition/blob/master/src/transition/ease.js "Source") Specifies the transition [easing function](https://github.com/d3/d3-ease) for all selected elements. The *value* must be specified as a function. The easing function is invoked for each frame of the animation, being passed the normalized time *t* in the range [0, 1]; it must then return the eased time *tʹ* which is typically also in the range [0, 1]. A good easing function should return 0 if *t* = 0 and 1 if *t* = 1. If an easing function is not specified, it defaults to [d3.easeCubic](https://github.com/d3/d3-ease#easeCubic). If a *value* is not specified, returns the current easing function for the first (non-null) element in the transition. This is generally useful only if you know that the transition contains exactly one element. ### Control Flow For advanced usage, transitions provide methods for custom control flow. # transition.on(typenames[, listener]) [<>](https://github.com/d3/d3-transition/blob/master/src/transition/on.js "Source") Adds or removes a *listener* to each selected element for the specified event *typenames*. The *typenames* is one of the following string event types: * `start` - when the transition starts. * `end` - when the transition ends. * `interrupt` - when the transition is interrupted. See [The Life of a Transition](#the-life-of-a-transition) for more. Note that these are *not* native DOM events as implemented by [*selection*.on](https://github.com/d3/d3-selection#selection_on) and [*selection*.dispatch](https://github.com/d3/d3-selection#selection_dispatch), but transition events! The type may be optionally followed by a period (`.`) and a name; the optional name allows multiple callbacks to be registered to receive events of the same type, such as `start.foo` and `start.bar`. To specify multiple typenames, separate typenames with spaces, such as `interrupt end` or `start.foo start.bar`. When a specified transition event is dispatched on a selected node, the specified *listener* will be invoked for the transitioning element, being passed the current datum `d` and index `i`, with the `this` context as the current DOM element. Listeners always see the latest datum for their element, but the index is a property of the selection and is fixed when the listener is assigned; to update the index, re-assign the listener. If an event listener was previously registered for the same *typename* on a selected element, the old listener is removed before the new listener is added. To remove a listener, pass null as the *listener*. To remove all listeners for a given name, pass null as the *listener* and `.foo` as the *typename*, where `foo` is the name; to remove all listeners with no name, specify `.` as the *typename*. If a *listener* is not specified, returns the currently-assigned listener for the specified event *typename* on the first (non-null) selected element, if any. If multiple typenames are specified, the first matching listener is returned. # transition.each(function) [<>](https://github.com/d3/d3-selection/blob/master/src/selection/each.js "Source") Invokes the specified *function* for each selected element, passing in the current datum `d` and index `i`, with the `this` context of the current DOM element. This method can be used to invoke arbitrary code for each selected element, and is useful for creating a context to access parent and child data simultaneously. Equivalent to [*selection*.each](https://github.com/d3/d3-selection#selection_each). # transition.call(function[, arguments…]) [<>](https://github.com/d3/d3-selection/blob/master/src/selection/call.js "Source") Invokes the specified *function* exactly once, passing in this transition along with any optional *arguments*. Returns this transition. This is equivalent to invoking the function by hand but facilitates method chaining. For example, to set several attributes in a reusable function: ```js function color(transition, fill, stroke) { transition .style("fill", fill) .style("stroke", stroke); } ``` Now say: ```js d3.selectAll("div").transition().call(color, "red", "blue"); ``` This is equivalent to: ```js color(d3.selectAll("div").transition(), "red", "blue"); ``` Equivalent to [*selection*.call](https://github.com/d3/d3-selection#selection_call). # transition.empty() [<>](https://github.com/d3/d3-selection/blob/master/src/selection/empty.js "Source") Returns true if this transition contains no (non-null) elements. Equivalent to [*selection*.empty](https://github.com/d3/d3-selection#selection_empty). # transition.nodes() [<>](https://github.com/d3/d3-selection/blob/master/src/selection/nodes.js "Source") Returns an array of all (non-null) elements in this transition. Equivalent to [*selection*.nodes](https://github.com/d3/d3-selection#selection_nodes). # transition.node() [<>](https://github.com/d3/d3-selection/blob/master/src/selection/node.js "Source") Returns the first (non-null) element in this transition. If the transition is empty, returns null. Equivalent to [*selection*.node](https://github.com/d3/d3-selection#selection_node). # transition.size() [<>](https://github.com/d3/d3-selection/blob/master/src/selection/size.js "Source") Returns the total number of elements in this transition. Equivalent to [*selection*.size](https://github.com/d3/d3-selection#selection_size). ### The Life of a Transition Immediately after creating a transition, such as by [*selection*.transition](#selection_transition) or [*transition*.transition](#transition_transition), you may configure the transition using methods such as [*transition*.delay](#transition_delay), [*transition*.duration](#transition_duration), [*transition*.attr](#transition_attr) and [*transition*.style](#transition_style). Methods that specify target values (such as *transition*.attr) are evaluated synchronously; however, methods that require the starting value for interpolation, such as [*transition*.attrTween](#transition_attrTween) and [*transition*.styleTween](#transition_styleTween), must be deferred until the transition starts. Shortly after creation, either at the end of the current frame or during the next frame, the transition is scheduled. At this point, the delay and `start` event listeners may no longer be changed. When the transition subsequently starts, it interrupts the active transition of the same name on the same element, if any, dispatching an `interrupt` event to registered listeners. (Note that interrupts happen on start, not creation, and thus even a zero-delay transition will not immediately interrupt the active transition: the old transition is given a final frame. Use [*selection*.interrupt](#selection_interrupt) to interrupt immediately.) The starting transition also cancels any pending transitions of the same name on the same element that were created before the starting transition. The transition then dispatches a `start` event to registered listeners. This is the last moment at which the transition may be modified: after starting, the transition’s timing, tweens, and listeners may no longer be changed. The transition initializes its tweens immediately after starting. During the frame the transition starts, but *after* all transitions starting this frame have been started, the transition invokes its tweens for the first time. Batching tween initialization, which typically involves reading from the DOM, improves performance by avoiding interleaved DOM reads and writes. For each frame that a transition is active, it invokes its tweens with an [eased](#transition_ease) *t*-value ranging from 0 to 1. Within each frame, the transition invokes its tweens in the order they were registered. When a transition ends, it invokes its tweens a final time with a (non-eased) *t*-value of 1. It then dispatches an `end` event to registered listeners. This is the last moment at which the transition may be inspected: after ending, the transition is deleted from the element, and its configuration is destroyed. (A transition’s configuration is also destroyed on interrupt or cancel.) d3-transition-1.1.0/d3-transition.sublime-project000066400000000000000000000002711310636727000217400ustar00rootroot00000000000000{ "folders": [ { "path": ".", "file_exclude_patterns": [ "*.sublime-workspace" ], "folder_exclude_patterns": [ "build" ] } ] } d3-transition-1.1.0/index.js000066400000000000000000000003041310636727000156560ustar00rootroot00000000000000import "./src/selection/index"; export {default as transition} from "./src/transition/index"; export {default as active} from "./src/active"; export {default as interrupt} from "./src/interrupt"; d3-transition-1.1.0/package.json000066400000000000000000000033621310636727000165060ustar00rootroot00000000000000{ "name": "d3-transition", "version": "1.1.0", "description": "Animated transitions for D3 selections.", "keywords": [ "d3", "d3-module", "dom", "transition", "animation" ], "homepage": "https://d3js.org/d3-transition/", "license": "BSD-3-Clause", "author": { "name": "Mike Bostock", "url": "http://bost.ocks.org/mike" }, "main": "build/d3-transition.js", "module": "index", "jsnext:main": "index", "repository": { "type": "git", "url": "https://github.com/d3/d3-transition.git" }, "scripts": { "pretest": "rm -rf build && mkdir build && rollup --banner \"$(preamble)\" -f umd -g d3-color:d3,d3-interpolate:d3,d3-ease:d3,d3-dispatch:d3,d3-selection:d3,d3-timer:d3 -n d3 -o build/d3-transition.js -- index.js", "test": "tape 'test/**/*-test.js' && eslint index.js src test", "prepublish": "npm run test && uglifyjs --preamble \"$(preamble)\" build/d3-transition.js -c -m -o build/d3-transition.min.js", "postpublish": "git push && git push --tags && cd ../d3.github.com && git pull && cp ../d3-transition/build/d3-transition.js d3-transition.v1.js && cp ../d3-transition/build/d3-transition.min.js d3-transition.v1.min.js && git add d3-transition.v1.js d3-transition.v1.min.js && git commit -m \"d3-transition ${npm_package_version}\" && git push && cd - && zip -j build/d3-transition.zip -- LICENSE README.md build/d3-transition.js build/d3-transition.min.js" }, "dependencies": { "d3-color": "1", "d3-dispatch": "1", "d3-ease": "1", "d3-interpolate": "1", "d3-selection": "^1.1.0", "d3-timer": "1" }, "devDependencies": { "eslint": "3", "package-preamble": "0.1", "rollup": "0.41", "jsdom": "10", "tape": "4", "uglify-js": "^2.8.11" } } d3-transition-1.1.0/src/000077500000000000000000000000001310636727000150035ustar00rootroot00000000000000d3-transition-1.1.0/src/active.js000066400000000000000000000007441310636727000166210ustar00rootroot00000000000000import {Transition} from "./transition/index"; import {SCHEDULED} from "./transition/schedule"; var root = [null]; export default function(node, name) { var schedules = node.__transition, schedule, i; if (schedules) { name = name == null ? null : name + ""; for (i in schedules) { if ((schedule = schedules[i]).state > SCHEDULED && schedule.name === name) { return new Transition([[node]], root, name, +i); } } } return null; } d3-transition-1.1.0/src/interrupt.js000066400000000000000000000012311310636727000173720ustar00rootroot00000000000000import {STARTING, ENDING, ENDED} from "./transition/schedule"; export default function(node, name) { var schedules = node.__transition, schedule, active, empty = true, i; if (!schedules) return; name = name == null ? null : name + ""; for (i in schedules) { if ((schedule = schedules[i]).name !== name) { empty = false; continue; } active = schedule.state > STARTING && schedule.state < ENDING; schedule.state = ENDED; schedule.timer.stop(); if (active) schedule.on.call("interrupt", node, node.__data__, schedule.index, schedule.group); delete schedules[i]; } if (empty) delete node.__transition; } d3-transition-1.1.0/src/selection/000077500000000000000000000000001310636727000167705ustar00rootroot00000000000000d3-transition-1.1.0/src/selection/index.js000066400000000000000000000003651310636727000204410ustar00rootroot00000000000000import {selection} from "d3-selection"; import selection_interrupt from "./interrupt"; import selection_transition from "./transition"; selection.prototype.interrupt = selection_interrupt; selection.prototype.transition = selection_transition; d3-transition-1.1.0/src/selection/interrupt.js000066400000000000000000000002121310636727000213550ustar00rootroot00000000000000import interrupt from "../interrupt"; export default function(name) { return this.each(function() { interrupt(this, name); }); } d3-transition-1.1.0/src/selection/transition.js000066400000000000000000000021021310636727000215130ustar00rootroot00000000000000import {Transition, newId} from "../transition/index"; import schedule from "../transition/schedule"; import {easeCubicInOut} from "d3-ease"; import {now} from "d3-timer"; var defaultTiming = { time: null, // Set on use. delay: 0, duration: 250, ease: easeCubicInOut }; function inherit(node, id) { var timing; while (!(timing = node.__transition) || !(timing = timing[id])) { if (!(node = node.parentNode)) { return defaultTiming.time = now(), defaultTiming; } } return timing; } export default function(name) { var id, timing; if (name instanceof Transition) { id = name._id, name = name._name; } else { id = newId(), (timing = defaultTiming).time = now(), name = name == null ? null : name + ""; } for (var groups = this._groups, m = groups.length, j = 0; j < m; ++j) { for (var group = groups[j], n = group.length, node, i = 0; i < n; ++i) { if (node = group[i]) { schedule(node, name, id, i, group, timing || inherit(node, id)); } } } return new Transition(groups, this._parents, name, id); } d3-transition-1.1.0/src/transition/000077500000000000000000000000001310636727000171755ustar00rootroot00000000000000d3-transition-1.1.0/src/transition/attr.js000066400000000000000000000046561310636727000205200ustar00rootroot00000000000000import {interpolateTransformSvg as interpolateTransform} from "d3-interpolate"; import {namespace} from "d3-selection"; import {tweenValue} from "./tween"; import interpolate from "./interpolate"; function attrRemove(name) { return function() { this.removeAttribute(name); }; } function attrRemoveNS(fullname) { return function() { this.removeAttributeNS(fullname.space, fullname.local); }; } function attrConstant(name, interpolate, value1) { var value00, interpolate0; return function() { var value0 = this.getAttribute(name); return value0 === value1 ? null : value0 === value00 ? interpolate0 : interpolate0 = interpolate(value00 = value0, value1); }; } function attrConstantNS(fullname, interpolate, value1) { var value00, interpolate0; return function() { var value0 = this.getAttributeNS(fullname.space, fullname.local); return value0 === value1 ? null : value0 === value00 ? interpolate0 : interpolate0 = interpolate(value00 = value0, value1); }; } function attrFunction(name, interpolate, value) { var value00, value10, interpolate0; return function() { var value0, value1 = value(this); if (value1 == null) return void this.removeAttribute(name); value0 = this.getAttribute(name); return value0 === value1 ? null : value0 === value00 && value1 === value10 ? interpolate0 : interpolate0 = interpolate(value00 = value0, value10 = value1); }; } function attrFunctionNS(fullname, interpolate, value) { var value00, value10, interpolate0; return function() { var value0, value1 = value(this); if (value1 == null) return void this.removeAttributeNS(fullname.space, fullname.local); value0 = this.getAttributeNS(fullname.space, fullname.local); return value0 === value1 ? null : value0 === value00 && value1 === value10 ? interpolate0 : interpolate0 = interpolate(value00 = value0, value10 = value1); }; } export default function(name, value) { var fullname = namespace(name), i = fullname === "transform" ? interpolateTransform : interpolate; return this.attrTween(name, typeof value === "function" ? (fullname.local ? attrFunctionNS : attrFunction)(fullname, i, tweenValue(this, "attr." + name, value)) : value == null ? (fullname.local ? attrRemoveNS : attrRemove)(fullname) : (fullname.local ? attrConstantNS : attrConstant)(fullname, i, value + "")); } d3-transition-1.1.0/src/transition/attrTween.js000066400000000000000000000016101310636727000215060ustar00rootroot00000000000000import {namespace} from "d3-selection"; function attrTweenNS(fullname, value) { function tween() { var node = this, i = value.apply(node, arguments); return i && function(t) { node.setAttributeNS(fullname.space, fullname.local, i(t)); }; } tween._value = value; return tween; } function attrTween(name, value) { function tween() { var node = this, i = value.apply(node, arguments); return i && function(t) { node.setAttribute(name, i(t)); }; } tween._value = value; return tween; } export default function(name, value) { var key = "attr." + name; if (arguments.length < 2) return (key = this.tween(key)) && key._value; if (value == null) return this.tween(key, null); if (typeof value !== "function") throw new Error; var fullname = namespace(name); return this.tween(key, (fullname.local ? attrTweenNS : attrTween)(fullname, value)); } d3-transition-1.1.0/src/transition/delay.js000066400000000000000000000007761310636727000206430ustar00rootroot00000000000000import {get, init} from "./schedule"; function delayFunction(id, value) { return function() { init(this, id).delay = +value.apply(this, arguments); }; } function delayConstant(id, value) { return value = +value, function() { init(this, id).delay = value; }; } export default function(value) { var id = this._id; return arguments.length ? this.each((typeof value === "function" ? delayFunction : delayConstant)(id, value)) : get(this.node(), id).delay; } d3-transition-1.1.0/src/transition/duration.js000066400000000000000000000010201310636727000213510ustar00rootroot00000000000000import {get, set} from "./schedule"; function durationFunction(id, value) { return function() { set(this, id).duration = +value.apply(this, arguments); }; } function durationConstant(id, value) { return value = +value, function() { set(this, id).duration = value; }; } export default function(value) { var id = this._id; return arguments.length ? this.each((typeof value === "function" ? durationFunction : durationConstant)(id, value)) : get(this.node(), id).duration; } d3-transition-1.1.0/src/transition/ease.js000066400000000000000000000005341310636727000204520ustar00rootroot00000000000000import {get, set} from "./schedule"; function easeConstant(id, value) { if (typeof value !== "function") throw new Error; return function() { set(this, id).ease = value; }; } export default function(value) { var id = this._id; return arguments.length ? this.each(easeConstant(id, value)) : get(this.node(), id).ease; } d3-transition-1.1.0/src/transition/filter.js000066400000000000000000000010761310636727000210240ustar00rootroot00000000000000import {matcher} from "d3-selection"; import {Transition} from "./index"; export default function(match) { if (typeof match !== "function") match = matcher(match); for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) { for (var group = groups[j], n = group.length, subgroup = subgroups[j] = [], node, i = 0; i < n; ++i) { if ((node = group[i]) && match.call(node, node.__data__, i, group)) { subgroup.push(node); } } } return new Transition(subgroups, this._parents, this._name, this._id); } d3-transition-1.1.0/src/transition/index.js000066400000000000000000000035441310636727000206500ustar00rootroot00000000000000import {selection} from "d3-selection"; import transition_attr from "./attr"; import transition_attrTween from "./attrTween"; import transition_delay from "./delay"; import transition_duration from "./duration"; import transition_ease from "./ease"; import transition_filter from "./filter"; import transition_merge from "./merge"; import transition_on from "./on"; import transition_remove from "./remove"; import transition_select from "./select"; import transition_selectAll from "./selectAll"; import transition_selection from "./selection"; import transition_style from "./style"; import transition_styleTween from "./styleTween"; import transition_text from "./text"; import transition_transition from "./transition"; import transition_tween from "./tween"; var id = 0; export function Transition(groups, parents, name, id) { this._groups = groups; this._parents = parents; this._name = name; this._id = id; } export default function transition(name) { return selection().transition(name); } export function newId() { return ++id; } var selection_prototype = selection.prototype; Transition.prototype = transition.prototype = { constructor: Transition, select: transition_select, selectAll: transition_selectAll, filter: transition_filter, merge: transition_merge, selection: transition_selection, transition: transition_transition, call: selection_prototype.call, nodes: selection_prototype.nodes, node: selection_prototype.node, size: selection_prototype.size, empty: selection_prototype.empty, each: selection_prototype.each, on: transition_on, attr: transition_attr, attrTween: transition_attrTween, style: transition_style, styleTween: transition_styleTween, text: transition_text, remove: transition_remove, tween: transition_tween, delay: transition_delay, duration: transition_duration, ease: transition_ease }; d3-transition-1.1.0/src/transition/interpolate.js000066400000000000000000000005241310636727000220620ustar00rootroot00000000000000import {color} from "d3-color"; import {interpolateNumber, interpolateRgb, interpolateString} from "d3-interpolate"; export default function(a, b) { var c; return (typeof b === "number" ? interpolateNumber : b instanceof color ? interpolateRgb : (c = color(b)) ? (b = c, interpolateRgb) : interpolateString)(a, b); } d3-transition-1.1.0/src/transition/merge.js000066400000000000000000000012151310636727000206310ustar00rootroot00000000000000import {Transition} from "./index"; export default function(transition) { if (transition._id !== this._id) throw new Error; for (var groups0 = this._groups, groups1 = transition._groups, m0 = groups0.length, m1 = groups1.length, m = Math.min(m0, m1), merges = new Array(m0), j = 0; j < m; ++j) { for (var group0 = groups0[j], group1 = groups1[j], n = group0.length, merge = merges[j] = new Array(n), node, i = 0; i < n; ++i) { if (node = group0[i] || group1[i]) { merge[i] = node; } } } for (; j < m0; ++j) { merges[j] = groups0[j]; } return new Transition(merges, this._parents, this._name, this._id); } d3-transition-1.1.0/src/transition/on.js000066400000000000000000000015251310636727000201520ustar00rootroot00000000000000import {get, set, init} from "./schedule"; function start(name) { return (name + "").trim().split(/^|\s+/).every(function(t) { var i = t.indexOf("."); if (i >= 0) t = t.slice(0, i); return !t || t === "start"; }); } function onFunction(id, name, listener) { var on0, on1, sit = start(name) ? init : set; return function() { var schedule = sit(this, id), on = schedule.on; // If this node shared a dispatch with the previous node, // just assign the updated shared dispatch and we’re done! // Otherwise, copy-on-write. if (on !== on0) (on1 = (on0 = on).copy()).on(name, listener); schedule.on = on1; }; } export default function(name, listener) { var id = this._id; return arguments.length < 2 ? get(this.node(), id).on.on(name) : this.each(onFunction(id, name, listener)); } d3-transition-1.1.0/src/transition/remove.js000066400000000000000000000004341310636727000210310ustar00rootroot00000000000000function removeFunction(id) { return function() { var parent = this.parentNode; for (var i in this.__transition) if (+i !== id) return; if (parent) parent.removeChild(this); }; } export default function() { return this.on("end.remove", removeFunction(this._id)); } d3-transition-1.1.0/src/transition/schedule.js000066400000000000000000000112701310636727000213300ustar00rootroot00000000000000import {dispatch} from "d3-dispatch"; import {timer, timeout} from "d3-timer"; var emptyOn = dispatch("start", "end", "interrupt"); var emptyTween = []; export var CREATED = 0; export var SCHEDULED = 1; export var STARTING = 2; export var STARTED = 3; export var RUNNING = 4; export var ENDING = 5; export var ENDED = 6; export default function(node, name, id, index, group, timing) { var schedules = node.__transition; if (!schedules) node.__transition = {}; else if (id in schedules) return; create(node, id, { name: name, index: index, // For context during callback. group: group, // For context during callback. on: emptyOn, tween: emptyTween, time: timing.time, delay: timing.delay, duration: timing.duration, ease: timing.ease, timer: null, state: CREATED }); } export function init(node, id) { var schedule = node.__transition; if (!schedule || !(schedule = schedule[id]) || schedule.state > CREATED) throw new Error("too late"); return schedule; } export function set(node, id) { var schedule = node.__transition; if (!schedule || !(schedule = schedule[id]) || schedule.state > STARTING) throw new Error("too late"); return schedule; } export function get(node, id) { var schedule = node.__transition; if (!schedule || !(schedule = schedule[id])) throw new Error("too late"); return schedule; } function create(node, id, self) { var schedules = node.__transition, tween; // Initialize the self timer when the transition is created. // Note the actual delay is not known until the first callback! schedules[id] = self; self.timer = timer(schedule, 0, self.time); function schedule(elapsed) { self.state = SCHEDULED; self.timer.restart(start, self.delay, self.time); // If the elapsed delay is less than our first sleep, start immediately. if (self.delay <= elapsed) start(elapsed - self.delay); } function start(elapsed) { var i, j, n, o; // If the state is not SCHEDULED, then we previously errored on start. if (self.state !== SCHEDULED) return stop(); for (i in schedules) { o = schedules[i]; if (o.name !== self.name) continue; // While this element already has a starting transition during this frame, // defer starting an interrupting transition until that transition has a // chance to tick (and possibly end); see d3/d3-transition#54! if (o.state === STARTED) return timeout(start); // Interrupt the active transition, if any. // Dispatch the interrupt event. if (o.state === RUNNING) { o.state = ENDED; o.timer.stop(); o.on.call("interrupt", node, node.__data__, o.index, o.group); delete schedules[i]; } // Cancel any pre-empted transitions. No interrupt event is dispatched // because the cancelled transitions never started. Note that this also // removes this transition from the pending list! else if (+i < id) { o.state = ENDED; o.timer.stop(); delete schedules[i]; } } // Defer the first tick to end of the current frame; see d3/d3#1576. // Note the transition may be canceled after start and before the first tick! // Note this must be scheduled before the start event; see d3/d3-transition#16! // Assuming this is successful, subsequent callbacks go straight to tick. timeout(function() { if (self.state === STARTED) { self.state = RUNNING; self.timer.restart(tick, self.delay, self.time); tick(elapsed); } }); // Dispatch the start event. // Note this must be done before the tween are initialized. self.state = STARTING; self.on.call("start", node, node.__data__, self.index, self.group); if (self.state !== STARTING) return; // interrupted self.state = STARTED; // Initialize the tween, deleting null tween. tween = new Array(n = self.tween.length); for (i = 0, j = -1; i < n; ++i) { if (o = self.tween[i].value.call(node, node.__data__, self.index, self.group)) { tween[++j] = o; } } tween.length = j + 1; } function tick(elapsed) { var t = elapsed < self.duration ? self.ease.call(null, elapsed / self.duration) : (self.timer.restart(stop), self.state = ENDING, 1), i = -1, n = tween.length; while (++i < n) { tween[i].call(null, t); } // Dispatch the end event. if (self.state === ENDING) { self.on.call("end", node, node.__data__, self.index, self.group); stop(); } } function stop() { self.state = ENDED; self.timer.stop(); delete schedules[id]; for (var i in schedules) return; // eslint-disable-line no-unused-vars delete node.__transition; } } d3-transition-1.1.0/src/transition/select.js000066400000000000000000000014721310636727000210160ustar00rootroot00000000000000import {selector} from "d3-selection"; import {Transition} from "./index"; import schedule, {get} from "./schedule"; export default function(select) { var name = this._name, id = this._id; if (typeof select !== "function") select = selector(select); for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) { for (var group = groups[j], n = group.length, subgroup = subgroups[j] = new Array(n), node, subnode, i = 0; i < n; ++i) { if ((node = group[i]) && (subnode = select.call(node, node.__data__, i, group))) { if ("__data__" in node) subnode.__data__ = node.__data__; subgroup[i] = subnode; schedule(subgroup[i], name, id, i, subgroup, get(node, id)); } } } return new Transition(subgroups, this._parents, name, id); } d3-transition-1.1.0/src/transition/selectAll.js000066400000000000000000000015631310636727000214500ustar00rootroot00000000000000import {selectorAll} from "d3-selection"; import {Transition} from "./index"; import schedule, {get} from "./schedule"; export default function(select) { var name = this._name, id = this._id; if (typeof select !== "function") select = selectorAll(select); for (var groups = this._groups, m = groups.length, subgroups = [], parents = [], j = 0; j < m; ++j) { for (var group = groups[j], n = group.length, node, i = 0; i < n; ++i) { if (node = group[i]) { for (var children = select.call(node, node.__data__, i, group), child, inherit = get(node, id), k = 0, l = children.length; k < l; ++k) { if (child = children[k]) { schedule(child, name, id, k, children, inherit); } } subgroups.push(children); parents.push(node); } } } return new Transition(subgroups, parents, name, id); } d3-transition-1.1.0/src/transition/selection.js000066400000000000000000000002561310636727000215230ustar00rootroot00000000000000import {selection} from "d3-selection"; var Selection = selection.prototype.constructor; export default function() { return new Selection(this._groups, this._parents); } d3-transition-1.1.0/src/transition/style.js000066400000000000000000000035721310636727000207020ustar00rootroot00000000000000import {interpolateTransformCss as interpolateTransform} from "d3-interpolate"; import {style} from "d3-selection"; import {tweenValue} from "./tween"; import interpolate from "./interpolate"; function styleRemove(name, interpolate) { var value00, value10, interpolate0; return function() { var value0 = style(this, name), value1 = (this.style.removeProperty(name), style(this, name)); return value0 === value1 ? null : value0 === value00 && value1 === value10 ? interpolate0 : interpolate0 = interpolate(value00 = value0, value10 = value1); }; } function styleRemoveEnd(name) { return function() { this.style.removeProperty(name); }; } function styleConstant(name, interpolate, value1) { var value00, interpolate0; return function() { var value0 = style(this, name); return value0 === value1 ? null : value0 === value00 ? interpolate0 : interpolate0 = interpolate(value00 = value0, value1); }; } function styleFunction(name, interpolate, value) { var value00, value10, interpolate0; return function() { var value0 = style(this, name), value1 = value(this); if (value1 == null) value1 = (this.style.removeProperty(name), style(this, name)); return value0 === value1 ? null : value0 === value00 && value1 === value10 ? interpolate0 : interpolate0 = interpolate(value00 = value0, value10 = value1); }; } export default function(name, value, priority) { var i = (name += "") === "transform" ? interpolateTransform : interpolate; return value == null ? this .styleTween(name, styleRemove(name, i)) .on("end.style." + name, styleRemoveEnd(name)) : this.styleTween(name, typeof value === "function" ? styleFunction(name, i, tweenValue(this, "style." + name, value)) : styleConstant(name, i, value + ""), priority); } d3-transition-1.1.0/src/transition/styleTween.js000066400000000000000000000011371310636727000217000ustar00rootroot00000000000000function styleTween(name, value, priority) { function tween() { var node = this, i = value.apply(node, arguments); return i && function(t) { node.style.setProperty(name, i(t), priority); }; } tween._value = value; return tween; } export default function(name, value, priority) { var key = "style." + (name += ""); if (arguments.length < 2) return (key = this.tween(key)) && key._value; if (value == null) return this.tween(key, null); if (typeof value !== "function") throw new Error; return this.tween(key, styleTween(name, value, priority == null ? "" : priority)); } d3-transition-1.1.0/src/transition/text.js000066400000000000000000000007311310636727000205200ustar00rootroot00000000000000import {tweenValue} from "./tween"; function textConstant(value) { return function() { this.textContent = value; }; } function textFunction(value) { return function() { var value1 = value(this); this.textContent = value1 == null ? "" : value1; }; } export default function(value) { return this.tween("text", typeof value === "function" ? textFunction(tweenValue(this, "text", value)) : textConstant(value == null ? "" : value + "")); } d3-transition-1.1.0/src/transition/transition.js000066400000000000000000000012631310636727000217270ustar00rootroot00000000000000import {Transition, newId} from "./index"; import schedule, {get} from "./schedule"; export default function() { var name = this._name, id0 = this._id, id1 = newId(); for (var groups = this._groups, m = groups.length, j = 0; j < m; ++j) { for (var group = groups[j], n = group.length, node, i = 0; i < n; ++i) { if (node = group[i]) { var inherit = get(node, id0); schedule(node, name, id1, i, group, { time: inherit.time + inherit.delay + inherit.duration, delay: 0, duration: inherit.duration, ease: inherit.ease }); } } } return new Transition(groups, this._parents, name, id1); } d3-transition-1.1.0/src/transition/tween.js000066400000000000000000000037521310636727000206640ustar00rootroot00000000000000import {get, set} from "./schedule"; function tweenRemove(id, name) { var tween0, tween1; return function() { var schedule = set(this, id), tween = schedule.tween; // If this node shared tween with the previous node, // just assign the updated shared tween and we’re done! // Otherwise, copy-on-write. if (tween !== tween0) { tween1 = tween0 = tween; for (var i = 0, n = tween1.length; i < n; ++i) { if (tween1[i].name === name) { tween1 = tween1.slice(); tween1.splice(i, 1); break; } } } schedule.tween = tween1; }; } function tweenFunction(id, name, value) { var tween0, tween1; if (typeof value !== "function") throw new Error; return function() { var schedule = set(this, id), tween = schedule.tween; // If this node shared tween with the previous node, // just assign the updated shared tween and we’re done! // Otherwise, copy-on-write. if (tween !== tween0) { tween1 = (tween0 = tween).slice(); for (var t = {name: name, value: value}, i = 0, n = tween1.length; i < n; ++i) { if (tween1[i].name === name) { tween1[i] = t; break; } } if (i === n) tween1.push(t); } schedule.tween = tween1; }; } export default function(name, value) { var id = this._id; name += ""; if (arguments.length < 2) { var tween = get(this.node(), id).tween; for (var i = 0, n = tween.length, t; i < n; ++i) { if ((t = tween[i]).name === name) { return t.value; } } return null; } return this.each((value == null ? tweenRemove : tweenFunction)(id, name, value)); } export function tweenValue(transition, name, value) { var id = transition._id; transition.each(function() { var schedule = set(this, id); (schedule.value || (schedule.value = {}))[name] = value.apply(this, arguments); }); return function(node) { return get(node, id).value[name]; }; } d3-transition-1.1.0/test/000077500000000000000000000000001310636727000151735ustar00rootroot00000000000000d3-transition-1.1.0/test/.eslintrc000066400000000000000000000003041310636727000170140ustar00rootroot00000000000000ecmaFeatures: modules: true env: es6: true browser: true node: true extends: "eslint:recommended" rules: no-cond-assign: 0 no-sparse-arrays: 0 no-unused-vars: 0 d3-transition-1.1.0/test/active-test.js000066400000000000000000000116121310636727000177620ustar00rootroot00000000000000var tape = require("tape"), jsdom = require("./jsdom"), d3_timer = require("d3-timer"), d3_selection = require("d3-selection"), d3_transition = require("../"); tape("d3.active(node) returns null if the specified node has no active transition with the null name", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root); // No transitions pending. test.strictEqual(d3_transition.active(root), null); // Two transitions created. selection.transition().delay(50).duration(50); selection.transition("foo").duration(50); test.strictEqual(d3_transition.active(root), null); // One transition scheduled; one active with a different name. d3_timer.timeout(function() { test.strictEqual(d3_transition.active(root), null); }); // No transitions remaining after the transition ends. d3_timer.timeout(function() { test.strictEqual(d3_transition.active(root), null); test.end(); }, 100); }); tape("d3.active(node, null) returns null if the specified node has no active transition with the null name", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root); // No transitions pending. test.strictEqual(d3_transition.active(root, null), null); // Two transitions created. selection.transition().delay(50).duration(50); selection.transition("foo").duration(50); test.strictEqual(d3_transition.active(root, null), null); // One transition scheduled; one active with a different name. d3_timer.timeout(function() { test.strictEqual(d3_transition.active(root, null), null); }); // No transitions remaining after the transition ends. d3_timer.timeout(function() { test.strictEqual(d3_transition.active(root, null), null); test.end(); }, 100); }); tape("d3.active(node, undefined) returns null if the specified node has no active transition with the null name", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root); // No transitions pending. test.strictEqual(d3_transition.active(root, undefined), null); // Two transitions created. selection.transition().delay(50).duration(50); selection.transition("foo").duration(50); test.strictEqual(d3_transition.active(root, undefined), null); // One transition scheduled; one active with a different name. d3_timer.timeout(function() { test.strictEqual(d3_transition.active(root, undefined), null); }); // No transitions remaining after the transition ends. d3_timer.timeout(function() { test.strictEqual(d3_transition.active(root, undefined), null); test.end(); }, 100); }); tape("d3.active(node, name) returns null if the specified node has no active transition with the specified name", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root); // No transitions pending. test.strictEqual(d3_transition.active(root, "foo"), null); // Two transitions created. selection.transition("foo").delay(50).duration(50); selection.transition().duration(50); test.strictEqual(d3_transition.active(root, null), null); // One transition scheduled; one active with a different name. test.strictEqual(d3_transition.active(root, "foo"), null); // One transition scheduled. d3_timer.timeout(function() { test.strictEqual(d3_transition.active(root, "foo"), null); }); // No transitions remaining after the transition ends. d3_timer.timeout(function() { test.strictEqual(d3_transition.active(root, "foo"), null); test.end(); }, 100); }); tape("d3.active(node) returns the active transition on the specified node with the null name", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition = selection.transition().on("start", check).tween("tween", tweened).on("end", ended); function check() { var t = d3_transition.active(root); test.deepEqual(t._groups, [[root]]); test.deepEqual(t._parents, [null]); test.strictEqual(t._name, null); test.strictEqual(t._id, transition._id); } function tweened() { check(); return function(t) { if (t >= 1) check(); }; } function ended() { check(); test.end(); } }); tape("d3.active(node, name) returns the active transition on the specified node with the specified name", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition = selection.transition("foo").on("start", check).tween("tween", tweened).on("end", ended); function check() { var t = d3_transition.active(root, "foo"); test.deepEqual(t._groups, [[root]]); test.deepEqual(t._parents, [null]); test.strictEqual(t._name, "foo"); test.strictEqual(t._id, transition._id); } function tweened() { check(); return function(t) { if (t >= 1) check(); }; } function ended() { check(); test.end(); } }); d3-transition-1.1.0/test/error-test.js000066400000000000000000000061461310636727000176460ustar00rootroot00000000000000var tape = require("tape"), jsdom = require("./jsdom"), d3_timer = require("d3-timer"), d3_selection = require("d3-selection"), d3_transition = require("../"); tape("transition.on(\"start\", error) terminates the transition", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition = selection.transition().on("start", function() { throw new Error; }); process.once("uncaughtException", function() {}); // No transitions remaining after the transition ends. d3_timer.timeout(function() { test.strictEqual(root.__transition, undefined); test.end(); }); }); tape("transition.on(\"start\", error) with delay terminates the transition", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition = selection.transition().delay(50).on("start", function() { throw new Error; }); process.once("uncaughtException", function() {}); // No transitions remaining after the transition ends. d3_timer.timeout(function() { test.strictEqual(root.__transition, undefined); test.end(); }, 50); }); tape("transition.tween(\"foo\", error) terminates the transition", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition = selection.transition().tween("foo", function() { throw new Error; }); process.once("uncaughtException", function() {}); // No transitions remaining after the transition ends. d3_timer.timeout(function() { test.strictEqual(root.__transition, undefined); test.end(); }); }); tape("transition.tween(\"foo\", error) with delay terminates the transition", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition = selection.transition().delay(50).tween("foo", function() { throw new Error; }); process.once("uncaughtException", function() {}); // No transitions remaining after the transition ends. d3_timer.timeout(function() { test.strictEqual(root.__transition, undefined); test.end(); }, 50); }); tape("transition.tween(\"foo\", deferredError) terminates the transition", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition = selection.transition().duration(50).tween("foo", function() { return function(t) { if (t === 1) throw new Error; }; }); process.once("uncaughtException", function() {}); // No transitions remaining after the transition ends. d3_timer.timeout(function() { test.strictEqual(root.__transition, undefined); test.end(); }, 50); }); tape("transition.on(\"end\", error) terminates the transition", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition = selection.transition().delay(50).duration(50).on("end", function() { throw new Error; }); process.once("uncaughtException", function() {}); // No transitions remaining after the transition ends. d3_timer.timeout(function() { test.strictEqual(root.__transition, undefined); test.end(); }, 100); }); d3-transition-1.1.0/test/interrupt-test.js000066400000000000000000000022571310636727000205500ustar00rootroot00000000000000var tape = require("tape"), jsdom = require("./jsdom"), d3_selection = require("d3-selection"), d3_transition = require("../"); tape("d3.interrupt(node) cancels any pending transitions on the specified node", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition1 = selection.transition(), transition2 = transition1.transition(); test.equal(transition1._id in root.__transition, true); test.equal(transition2._id in root.__transition, true); d3_transition.interrupt(root); test.equal(root.__transition, undefined); test.end(); }); tape("selection.interrupt(name) only cancels pending transitions with the specified name", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition1 = selection.transition("foo"), transition2 = selection.transition(); test.equal(transition1._id in root.__transition, true); test.equal(transition2._id in root.__transition, true); d3_transition.interrupt(root, "foo"); test.equal(transition1._id in root.__transition, false); test.equal(transition2._id in root.__transition, true); test.end(); }); d3-transition-1.1.0/test/jsdom.js000066400000000000000000000001661310636727000166500ustar00rootroot00000000000000var jsdom = require("jsdom"); module.exports = function(html) { return (new jsdom.JSDOM(html)).window.document; }; d3-transition-1.1.0/test/selection/000077500000000000000000000000001310636727000171605ustar00rootroot00000000000000d3-transition-1.1.0/test/selection/interrupt-test.js000066400000000000000000000264211310636727000225340ustar00rootroot00000000000000var tape = require("tape"), jsdom = require("../jsdom"), d3_selection = require("d3-selection"), d3_timer = require("d3-timer"), state = require("../transition/state"); require("../../"); tape("selection.interrupt() returns the selection", function(test) { var document = jsdom(), selection = d3_selection.select(document); test.equal(selection.interrupt(), selection); test.end(); }); tape("selection.interrupt() cancels any pending transitions on the selected elements", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition1 = selection.transition(), transition2 = transition1.transition(); test.equal(transition1._id in root.__transition, true); test.equal(transition2._id in root.__transition, true); test.equal(selection.interrupt(), selection); test.equal(root.__transition, undefined); test.end(); }); tape("selection.interrupt() only cancels pending transitions with the null name", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition1 = selection.transition("foo"), transition2 = selection.transition(); test.equal(transition1._id in root.__transition, true); test.equal(transition2._id in root.__transition, true); test.equal(selection.interrupt(), selection); test.equal(transition1._id in root.__transition, true); test.equal(transition2._id in root.__transition, false); test.end(); }); tape("selection.interrupt(null) only cancels pending transitions with the null name", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition1 = selection.transition("foo"), transition2 = selection.transition(); test.equal(transition1._id in root.__transition, true); test.equal(transition2._id in root.__transition, true); test.equal(selection.interrupt(null), selection); test.equal(transition1._id in root.__transition, true); test.equal(transition2._id in root.__transition, false); test.end(); }); tape("selection.interrupt(undefined) only cancels pending transitions with the null name", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition1 = selection.transition("foo"), transition2 = selection.transition(); test.equal(transition1._id in root.__transition, true); test.equal(transition2._id in root.__transition, true); test.equal(selection.interrupt(undefined), selection); test.equal(transition1._id in root.__transition, true); test.equal(transition2._id in root.__transition, false); test.end(); }); tape("selection.interrupt(name) only cancels pending transitions with the specified name", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition1 = selection.transition("foo"), transition2 = selection.transition(); test.equal(transition1._id in root.__transition, true); test.equal(transition2._id in root.__transition, true); test.equal(selection.interrupt("foo"), selection); test.equal(transition1._id in root.__transition, false); test.equal(transition2._id in root.__transition, true); test.end(); }); tape("selection.interrupt(name) coerces the name to a string", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition1 = selection.transition("foo"), transition2 = selection.transition(); test.equal(transition1._id in root.__transition, true); test.equal(transition2._id in root.__transition, true); test.equal(selection.interrupt({toString: function() { return "foo"; }}), selection); test.equal(transition1._id in root.__transition, false); test.equal(transition2._id in root.__transition, true); test.end(); }); tape("selection.interrupt() does nothing if there is no transition on the selected elements", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root); test.equal(root.__transition, undefined); test.equal(selection.interrupt(), selection); test.equal(root.__transition, undefined); test.end(); }); tape("selection.interrupt() dispatches an interrupt event to the started transition on the selected elements", function(test) { var root = jsdom().documentElement, interrupts = 0, selection = d3_selection.select(root), transition = selection.transition().on("interrupt", function() { ++interrupts; }); d3_timer.timeout(function() { var schedule = root.__transition[transition._id]; test.equal(schedule.state, state.STARTED); selection.interrupt(); test.equal(schedule.timer._call, null); test.equal(schedule.state, state.ENDED); test.equal(root.__transition, undefined); test.equal(interrupts, 1); test.end(); }); }); tape("selection.interrupt() destroys the schedule after dispatching the interrupt event", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition = selection.transition().on("interrupt", interrupted); d3_timer.timeout(function() { selection.interrupt(); }); function interrupted() { test.equal(transition.delay(), 0); test.equal(transition.duration(), 250); test.equal(transition.on("interrupt"), interrupted); test.end(); } }); tape("selection.interrupt() does not dispatch an interrupt event to a starting transition", function(test) { var root = jsdom().documentElement, interrupts = 0, selection = d3_selection.select(root), transition = selection.transition().on("interrupt", function() { ++interrupts; }).on("start", started); function started() { var schedule = root.__transition[transition._id]; test.equal(schedule.state, state.STARTING); selection.interrupt(); test.equal(schedule.timer._call, null); test.equal(schedule.state, state.ENDED); test.equal(root.__transition, undefined); test.equal(interrupts, 0); test.end(); } }); tape("selection.interrupt() prevents a created transition from starting", function(test) { var root = jsdom().documentElement, starts = 0, selection = d3_selection.select(root), transition = selection.transition().on("start", function() { ++starts; }), schedule = root.__transition[transition._id]; test.equal(schedule.state, state.CREATED); selection.interrupt(); test.equal(schedule.timer._call, null); test.equal(schedule.state, state.ENDED); test.equal(root.__transition, undefined); d3_timer.timeout(function() { test.equal(starts, 0); test.end(); }, 10); }); tape("selection.interrupt() prevents a scheduled transition from starting", function(test) { var root = jsdom().documentElement, starts = 0, selection = d3_selection.select(root), transition = selection.transition().delay(50).on("start", function() { ++starts; }), schedule = root.__transition[transition._id]; d3_timer.timeout(function() { test.equal(schedule.state, state.SCHEDULED); selection.interrupt(); test.equal(schedule.timer._call, null); test.equal(schedule.state, state.ENDED); test.equal(root.__transition, undefined); }); d3_timer.timeout(function() { test.equal(starts, 0); test.end(); }, 60); }); tape("selection.interrupt() prevents a starting transition from initializing tweens", function(test) { var root = jsdom().documentElement, tweens = 0, selection = d3_selection.select(root), transition = selection.transition().tween("tween", function() { ++tweens; }).on("start", started), schedule = root.__transition[transition._id]; function started() { test.equal(schedule.state, state.STARTING); selection.interrupt(); test.equal(schedule.timer._call, null); test.equal(schedule.state, state.ENDED); test.equal(root.__transition, undefined); } d3_timer.timeout(function() { test.equal(tweens, 0); test.end(); }, 10); }); tape("selection.interrupt() during tween initialization prevents an active transition from continuing", function(test) { var root = jsdom().documentElement, tweens = 0, selection = d3_selection.select(root), transition = selection.transition().tween("tween", function() { selection.interrupt(); return function() { ++tweens; }; }), schedule = root.__transition[transition._id]; d3_timer.timeout(function() { test.equal(schedule.timer._call, null); test.equal(schedule.state, state.ENDED); test.equal(root.__transition, undefined); test.equal(tweens, 0); test.end(); }, 10); }); tape("selection.interrupt() prevents an active transition from continuing", function(test) { var root = jsdom().documentElement, interrupted = false, tweens = 0, selection = d3_selection.select(root), transition = selection.transition().tween("tween", function() { return function() { if (interrupted) ++tweens; }; }), schedule = root.__transition[transition._id]; d3_timer.timeout(function() { interrupted = true; test.equal(schedule.state, state.STARTED); selection.interrupt(); test.equal(schedule.timer._call, null); test.equal(schedule.state, state.ENDED); test.equal(root.__transition, undefined); }, 10); d3_timer.timeout(function() { test.equal(tweens, 0); test.end(); }, 50); }); tape("selection.interrupt() during the final tween invocation prevents the end event from being dispatched", function(test) { var root = jsdom().documentElement, ends = 0, selection = d3_selection.select(root), transition = selection.transition().duration(50).tween("tween", tween).on("end", function() { ++ends; }), schedule = root.__transition[transition._id]; function tween() { return function(t) { if (t >= 1) { test.equal(schedule.state, state.ENDING); selection.interrupt(); } }; } d3_timer.timeout(function() { test.equal(schedule.timer._call, null); test.equal(schedule.state, state.ENDED); test.equal(root.__transition, undefined); test.equal(ends, 0); test.end(); }, 60); }); tape("selection.interrupt() has no effect on an ended transition", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition = selection.transition().duration(50).on("end", ended), schedule = root.__transition[transition._id]; function ended() { d3_timer.timeout(function() { test.equal(schedule.state, state.ENDED); test.equal(schedule.timer._call, null); selection.interrupt(); test.equal(schedule.state, state.ENDED); test.equal(schedule.timer._call, null); test.equal(root.__transition, undefined); test.end(); }); } }); tape("selection.interrupt() has no effect on an interrupting transition", function(test) { var root = jsdom().documentElement, interrupts = 0, selection = d3_selection.select(root), transition = selection.transition().duration(50).on("interrupt", interrupted), schedule = root.__transition[transition._id]; d3_timer.timeout(function() { test.equal(schedule.state, state.STARTED); selection.interrupt(); test.equal(schedule.state, state.ENDED); test.equal(schedule.timer._call, null); test.equal(interrupts, 1); test.end(); }); function interrupted() { ++interrupts; selection.interrupt(); } }); d3-transition-1.1.0/test/selection/transition-test.js000066400000000000000000000122401310636727000226640ustar00rootroot00000000000000var tape = require("tape"), jsdom = require("../jsdom"), d3_timer = require("d3-timer"), d3_ease = require("d3-ease"), d3_selection = require("d3-selection"), d3_transition = require("../../"); tape("selection.transition() returns an instanceof d3.transition", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition = selection.transition(); test.equal(transition instanceof d3_transition.transition, true); test.end(); }); tape("selection.transition() uses the default timing parameters", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition = selection.transition(), schedule = root.__transition[transition._id]; test.equal(schedule.time, d3_timer.now()); test.equal(schedule.delay, 0); test.equal(schedule.duration, 250); test.equal(schedule.ease, d3_ease.easeCubic); test.end(); }); tape("selection.transition() assigns a monotonically-increasing id", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition1 = selection.transition(), transition2 = selection.transition(), transition3 = selection.transition(); test.ok(transition2._id > transition1._id); test.ok(transition3._id > transition2._id); test.end(); }); tape("selection.transition() uses a default name of null", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition = selection.transition(), schedule = root.__transition[transition._id]; test.strictEqual(schedule.name, null); test.end(); }); tape("selection.transition(null) uses a name of null", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition = selection.transition(null), schedule = root.__transition[transition._id]; test.strictEqual(schedule.name, null); test.end(); }); tape("selection.transition(undefined) uses a name of null", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition = selection.transition(undefined), schedule = root.__transition[transition._id]; test.strictEqual(schedule.name, null); test.end(); }); tape("selection.transition(name) uses the specified name", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition = selection.transition("foo"), schedule = root.__transition[transition._id]; test.strictEqual(schedule.name, "foo"); test.end(); }); tape("selection.transition(name) coerces the name to a string", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition = selection.transition({toString: function() { return "foo"; }}), schedule = root.__transition[transition._id]; test.strictEqual(schedule.name, "foo"); test.end(); }); tape("selection.transition(transition) inherits the id, name and timing from the corresponding parent in the specified transition", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), selection = d3_selection.selectAll([one, two]), transition = selection.transition().delay(function(d, i) { return i * 50; }).duration(100).ease(d3_ease.easeBounce), schedule1 = one.__transition[transition._id], schedule2 = two.__transition[transition._id], transition1b = d3_selection.select(one.firstChild).transition(transition), schedule1b = one.firstChild.__transition[transition._id]; test.equal(transition1b._id, transition._id); test.equal(schedule1b.name, schedule1.name); test.equal(schedule1b.delay, schedule1.delay); test.equal(schedule1b.duration, schedule1.duration); test.equal(schedule1b.ease, schedule1.ease); test.equal(schedule1b.time, schedule1.time); d3_timer.timeout(function() { var transition2b = d3_selection.select(two.firstChild).transition(transition), schedule2b = two.firstChild.__transition[transition._id]; test.equal(transition2b._id, transition._id); test.equal(schedule2b.name, schedule2.name); test.equal(schedule2b.delay, schedule2.delay); test.equal(schedule2b.duration, schedule2.duration); test.equal(schedule2b.ease, schedule2.ease); test.equal(schedule2b.time, schedule2.time); test.end(); }, 10); }); tape("selection.transition(transition) reselects the existing transition with the specified transition’s id, if any", function(test) { var root = jsdom().documentElement, foo = function foo() {}, bar = function bar() {}, selection = d3_selection.select(root), transition1 = selection.transition().tween("tween", foo), schedule1 = root.__transition[transition1._id], transition2 = selection.transition(transition1).tween("tween", bar), schedule2 = root.__transition[transition2._id]; test.equal(transition1._id, transition2._id); test.equal(schedule1, schedule2); test.equal(transition1.tween("tween"), bar); test.equal(transition2.tween("tween"), bar); test.end(); }); d3-transition-1.1.0/test/transition/000077500000000000000000000000001310636727000173655ustar00rootroot00000000000000d3-transition-1.1.0/test/transition/attr-test.js000066400000000000000000000212611310636727000216540ustar00rootroot00000000000000var tape = require("tape"), jsdom = require("../jsdom"), d3_ease = require("d3-ease"), d3_timer = require("d3-timer"), d3_interpolate = require("d3-interpolate"), d3_selection = require("d3-selection"); require("../../"); tape("transition.attr(name, value) creates an tween to the specified value", function(test) { var root = jsdom().documentElement, ease = d3_ease.easeCubic, duration = 250, interpolate = d3_interpolate.interpolateRgb("red", "blue"), selection = d3_selection.select(root).attr("fill", "red"), transition = selection.transition().attr("fill", "blue"); d3_timer.timeout(function(elapsed) { test.strictEqual(root.getAttribute("fill"), interpolate(ease(elapsed / duration))); test.end(); }, 125); }); tape("transition.attr(name, value) creates a namespaced tween to the specified value", function(test) { var root = jsdom().documentElement, ease = d3_ease.easeCubic, duration = 250, interpolate = d3_interpolate.interpolateRgb("red", "blue"), selection = d3_selection.select(root).attr("svg:fill", "red"), transition = selection.transition().attr("svg:fill", "blue"); d3_timer.timeout(function(elapsed) { test.strictEqual(root.getAttributeNS("http://www.w3.org/2000/svg", "fill"), interpolate(ease(elapsed / duration))); test.end(); }, 125); }); tape("transition.attr(name, value) creates an tween to the value returned by the specified function", function(test) { var root = jsdom().documentElement, ease = d3_ease.easeCubic, duration = 250, interpolate = d3_interpolate.interpolateRgb("red", "blue"), selection = d3_selection.select(root).attr("fill", "red"), transition = selection.transition().attr("fill", function() { return "blue"; }); d3_timer.timeout(function(elapsed) { test.strictEqual(root.getAttribute("fill"), interpolate(ease(elapsed / duration))); test.end(); }, 125); }); tape("transition.attr(name, value) creates a namespaced tween to the value returned by the specified function", function(test) { var root = jsdom().documentElement, ease = d3_ease.easeCubic, duration = 250, interpolate = d3_interpolate.interpolateRgb("red", "blue"), selection = d3_selection.select(root).attr("svg:fill", "red"), transition = selection.transition().attr("svg:fill", function() { return "blue"; }); d3_timer.timeout(function(elapsed) { test.strictEqual(root.getAttributeNS("http://www.w3.org/2000/svg", "fill"), interpolate(ease(elapsed / duration))); test.end(); }, 125); }); tape("transition.attr(name, value) immediately evaluates the specified function with the expected context and arguments", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), ease = d3_ease.easeCubic, duration = 250, interpolate1 = d3_interpolate.interpolateRgb("cyan", "red"), interpolate2 = d3_interpolate.interpolateRgb("magenta", "green"), selection = d3_selection.selectAll([one, two]).data(["red", "green"]), result = [], transition = selection.transition().attr("fill", function(d, i, nodes) { result.push([d, i, nodes, this]); return d; }); test.deepEqual(result, [ ["red", 0, [one, two], one], ["green", 1, [one, two], two] ]); d3_timer.timeout(function(elapsed) { test.strictEqual(one.getAttribute("fill"), interpolate1(ease(elapsed / duration))); test.strictEqual(two.getAttribute("fill"), interpolate2(ease(elapsed / duration))); test.end(); }, 125); }); tape("transition.attr(name, value) constructs an interpolator using the current value on start", function(test) { var root = jsdom().documentElement, ease = d3_ease.easeCubic, duration = 250, interpolate = d3_interpolate.interpolateRgb("red", "blue"), selection = d3_selection.select(root), transition = selection.transition().on("start", function() { selection.attr("fill", "red"); }).attr("fill", function() { return "blue"; }); d3_timer.timeout(function(elapsed) { test.strictEqual(root.getAttribute("fill"), interpolate(ease(elapsed / duration))); test.end(); }, 125); }); tape("transition.attr(name, null) creates an tween which removes the specified attribute post-start", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root).attr("fill", "red"), transition = selection.transition().attr("fill", null).on("start", started); function started() { test.equal(root.getAttribute("fill"), "red"); } d3_timer.timeout(function(elapsed) { test.equal(root.hasAttribute("fill"), false); test.end(); }); }); tape("transition.attr(name, null) creates an tween which removes the specified namespaced attribute post-start", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root).attr("svg:fill", "red"), transition = selection.transition().attr("svg:fill", null).on("start", started); function started() { test.equal(root.getAttributeNS("http://www.w3.org/2000/svg", "fill"), "red"); } d3_timer.timeout(function(elapsed) { test.equal(root.hasAttributeNS("http://www.w3.org/2000/svg", "fill"), false); test.end(); }); }); tape("transition.attr(name, value) creates an tween which removes the specified attribute post-start if the specified function returns null", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root).attr("fill", "red"), transition = selection.transition().attr("fill", function() {}).on("start", started); function started() { test.equal(root.getAttribute("fill"), "red"); } d3_timer.timeout(function(elapsed) { test.equal(root.hasAttribute("fill"), false); test.end(); }); }); tape("transition.attr(name, value) creates an tween which removes the specified namespaced attribute post-start if the specified function returns null", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root).attr("svg:fill", "red"), transition = selection.transition().attr("svg:fill", function() {}).on("start", started); function started() { test.equal(root.getAttributeNS("http://www.w3.org/2000/svg", "fill"), "red"); } d3_timer.timeout(function(elapsed) { test.equal(root.hasAttributeNS("http://www.w3.org/2000/svg", "fill"), false); test.end(); }); }); tape("transition.attr(name, value) interpolates numbers", function(test) { var root = jsdom().documentElement, ease = d3_ease.easeCubic, duration = 250, interpolate = d3_interpolate.interpolateNumber(1, 2), selection = d3_selection.select(root).attr("foo", 1), transition = selection.transition().attr("foo", 2); d3_timer.timeout(function(elapsed) { test.strictEqual(root.getAttribute("foo"), interpolate(ease(elapsed / duration)) + ""); test.end(); }, 125); }); tape("transition.attr(name, value) interpolates strings", function(test) { var root = jsdom().documentElement, ease = d3_ease.easeCubic, duration = 250, interpolate = d3_interpolate.interpolateString("1px", "2px"), selection = d3_selection.select(root).attr("foo", "1px"), transition = selection.transition().attr("foo", "2px"); d3_timer.timeout(function(elapsed) { test.strictEqual(root.getAttribute("foo"), interpolate(ease(elapsed / duration))); test.end(); }, 125); }); tape("transition.attr(name, value) interpolates colors", function(test) { var root = jsdom().documentElement, ease = d3_ease.easeCubic, duration = 250, interpolate = d3_interpolate.interpolateRgb("#f00", "#00f"), selection = d3_selection.select(root).attr("foo", "#f00"), transition = selection.transition().attr("foo", "#00f"); d3_timer.timeout(function(elapsed) { test.strictEqual(root.getAttribute("foo"), interpolate(ease(elapsed / duration))); test.end(); }, 125); }); tape("transition.attr(name, value) creates an attrTween with the specified name", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root).attr("fill", "red"), transition = selection.transition().attr("fill", "blue"); test.equal(transition.attrTween("fill").call(root)(0.5), "rgb(128, 0, 128)"); test.end(); }); tape("transition.attr(name, value) creates a tween with the name \"attr.name\"", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root).attr("fill", "red"), transition = selection.transition().attr("fill", "blue"); transition.tween("attr.fill").call(root)(0.5); test.equal(root.getAttribute("fill"), "rgb(128, 0, 128)"); test.end(); }); d3-transition-1.1.0/test/transition/attrTween-test.js000066400000000000000000000126761310636727000226710ustar00rootroot00000000000000var tape = require("tape"), jsdom = require("../jsdom"), d3_ease = require("d3-ease"), d3_timer = require("d3-timer"), d3_interpolate = require("d3-interpolate"), d3_selection = require("d3-selection"), state = require("./state"); require("../../"); tape("transition.attrTween(name, value) defines an attribute tween using the interpolator returned by the specified function", function(test) { var root = jsdom().documentElement, interpolate = d3_interpolate.interpolateHcl("red", "blue"), transition = d3_selection.select(root).transition().attrTween("foo", function() { return interpolate; }); d3_timer.timeout(function(elapsed) { test.strictEqual(root.getAttribute("foo"), interpolate(d3_ease.easeCubic(elapsed / 250))); test.end(); }, 125); }); tape("transition.attrTween(name, value) invokes the value function with the expected context and arguments", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), result = [], transition = d3_selection.selectAll([one, two]).data(["one", "two"]).transition().attrTween("foo", function(d, i, nodes) { result.push([d, i, nodes, this]); }); d3_timer.timeout(function(elapsed) { test.deepEqual(result, [ ["one", 0, [one, two], one], ["two", 1, [one, two], two] ]); test.end(); }); }); tape("transition.attrTween(name, value) passes the eased time to the interpolator", function(test) { var root = jsdom().documentElement, then = d3_timer.now(), duration = 250, ease = d3_ease.easeCubic, transition = d3_selection.select(root).transition().attrTween("foo", function() { return interpolate; }).on("end", function() { test.end(); }), schedule = root.__transition[transition._id]; function interpolate(t) { "use strict"; test.equal(this, undefined); test.equal(t, schedule.state === state.ENDING ? 1 : ease((d3_timer.now() - then) / duration)); } }); tape("transition.attrTween(name, value) allows the specified function to return null for a noop", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root).attr("foo", "42").attr("svg:bar", "43"), transition = selection.transition().attrTween("foo", function() {}).attrTween("svg:bar", function() {}); d3_timer.timeout(function(elapsed) { test.strictEqual(root.getAttribute("foo"), "42"); test.strictEqual(root.getAttributeNS("http://www.w3.org/2000/svg", "bar"), "43"); test.end(); }, 125); }); tape("transition.attrTween(name, value) defines a namespaced attribute tween using the interpolator returned by the specified function", function(test) { var root = jsdom().documentElement, interpolate = d3_interpolate.interpolateHcl("red", "blue"), transition = d3_selection.select(root).transition().attrTween("svg:foo", function() { return interpolate; }); d3_timer.timeout(function(elapsed) { test.strictEqual(root.getAttributeNS("http://www.w3.org/2000/svg", "foo"), interpolate(d3_ease.easeCubic(elapsed / 250))); test.end(); }, 125); }); tape("transition.attrTween(name, value) coerces the specified name to a string", function(test) { var root = jsdom().documentElement, interpolate = d3_interpolate.interpolateHcl("red", "blue"), transition = d3_selection.select(root).transition().attrTween({toString: function() { return "foo"; }}, function() { return interpolate; }); d3_timer.timeout(function(elapsed) { test.strictEqual(root.getAttribute("foo"), interpolate(d3_ease.easeCubic(elapsed / 250))); test.end(); }, 125); }); tape("transition.attrTween(name, value) throws an error if value is not null and not a function", function(test) { var root = jsdom().documentElement, transition = d3_selection.select(root).transition(); test.throws(function() { transition.attrTween("foo", 42); }); test.end(); }); tape("transition.attrTween(name, null) removes the specified attribute tween", function(test) { var root = jsdom().documentElement, interpolate = d3_interpolate.interpolateHcl("red", "blue"), transition = d3_selection.select(root).transition().attrTween("foo", function() { return interpolate; }).attrTween("foo", null); test.equal(transition.attrTween("foo"), null); test.equal(transition.tween("attr.foo"), null); d3_timer.timeout(function(elapsed) { test.strictEqual(root.hasAttribute("foo"), false); test.end(); }, 125); }); tape("transition.attrTween(name) returns the attribute tween with the specified name", function(test) { var root = jsdom().documentElement, interpolate = d3_interpolate.interpolateHcl("red", "blue"), tween = function() { return interpolate; }, transition = d3_selection.select(root).transition().attrTween("foo", tween).on("start", started).on("end", ended); test.equal(transition.attrTween("foo"), tween); test.equal(transition.attrTween("bar"), null); function started() { test.equal(transition.attrTween("foo"), tween); } function ended() { test.equal(transition.attrTween("foo"), tween); test.end(); } }); tape("transition.attrTween(name) coerces the specified name to a string", function(test) { var root = jsdom().documentElement, tween = function() {}, transition = d3_selection.select(root).transition().attrTween("color", tween); test.equal(transition.attrTween({toString: function() { return "color"; }}), tween); test.end(); }); d3-transition-1.1.0/test/transition/call-test.js000066400000000000000000000004471310636727000216200ustar00rootroot00000000000000var tape = require("tape"), d3_selection = require("d3-selection"), d3_transition = require("../../"); tape("transition.call is the same as selection.call", function(test) { test.equal(d3_transition.transition.prototype.call, d3_selection.selection.prototype.call); test.end(); }); d3-transition-1.1.0/test/transition/delay-test.js000066400000000000000000000075021310636727000220020ustar00rootroot00000000000000var tape = require("tape"), jsdom = require("../jsdom"), d3_selection = require("d3-selection"); require("../../"); tape("transition.delay() returns the delay for the first non-null node", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), transition1 = d3_selection.select(one).transition(), transition2 = d3_selection.select(two).transition().delay(50); test.strictEqual(one.__transition[transition1._id].delay, 0); test.strictEqual(two.__transition[transition2._id].delay, 50); test.strictEqual(transition1.delay(), 0); test.strictEqual(transition2.delay(), 50); test.strictEqual(d3_selection.select(one).transition(transition1).delay(), 0); test.strictEqual(d3_selection.select(two).transition(transition2).delay(), 50); test.strictEqual(d3_selection.selectAll([null, one]).transition(transition1).delay(), 0); test.strictEqual(d3_selection.selectAll([null, two]).transition(transition2).delay(), 50); test.strictEqual(d3_selection.selectAll([one, two]).transition(transition1).delay(), 0); test.strictEqual(d3_selection.selectAll([two, one]).transition(transition2).delay(), 50); test.end(); }); tape("transition.delay(number) sets the delay for each selected element to the specified number", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), transition = d3_selection.selectAll([one, two]).transition().delay(50); test.strictEqual(one.__transition[transition._id].delay, 50); test.strictEqual(two.__transition[transition._id].delay, 50); test.end(); }); tape("transition.delay(value) coerces the specified value to a number", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), transition = d3_selection.selectAll([one, two]).transition().delay("50"); test.strictEqual(one.__transition[transition._id].delay, 50); test.strictEqual(two.__transition[transition._id].delay, 50); test.end(); }); tape("transition.delay(function) passes the expected arguments and context to the function", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), result = [], selection = d3_selection.selectAll([one, two]).data(["one", "two"]), transition = selection.transition().delay(function(d, i, nodes) { result.push([d, i, nodes, this]); }); test.deepEqual(result, [ ["one", 0, transition._groups[0], one], ["two", 1, transition._groups[0], two] ]); test.end(); }); tape("transition.delay(function) sets the delay for each selected element to the number returned by the specified function", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), transition = d3_selection.selectAll([one, two]).transition().delay(function(d, i) { return i * 20; }); test.strictEqual(one.__transition[transition._id].delay, 0); test.strictEqual(two.__transition[transition._id].delay, 20); test.end(); }); tape("transition.delay(function) coerces the value returned by the specified function to a number", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), transition = d3_selection.selectAll([one, two]).transition().delay(function(d, i) { return i * 20 + ""; }); test.strictEqual(one.__transition[transition._id].delay, 0); test.strictEqual(two.__transition[transition._id].delay, 20); test.end(); }); d3-transition-1.1.0/test/transition/duration-test.js000066400000000000000000000076571310636727000225440ustar00rootroot00000000000000var tape = require("tape"), jsdom = require("../jsdom"), d3_selection = require("d3-selection"); require("../../"); tape("transition.duration() returns the duration for the first non-null node", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), transition1 = d3_selection.select(one).transition(), transition2 = d3_selection.select(two).transition().duration(50); test.strictEqual(one.__transition[transition1._id].duration, 250); test.strictEqual(two.__transition[transition2._id].duration, 50); test.strictEqual(transition1.duration(), 250); test.strictEqual(transition2.duration(), 50); test.strictEqual(d3_selection.select(one).transition(transition1).duration(), 250); test.strictEqual(d3_selection.select(two).transition(transition2).duration(), 50); test.strictEqual(d3_selection.selectAll([null, one]).transition(transition1).duration(), 250); test.strictEqual(d3_selection.selectAll([null, two]).transition(transition2).duration(), 50); test.strictEqual(d3_selection.selectAll([one, two]).transition(transition1).duration(), 250); test.strictEqual(d3_selection.selectAll([two, one]).transition(transition2).duration(), 50); test.end(); }); tape("transition.duration(number) sets the duration for each selected element to the specified number", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), transition = d3_selection.selectAll([one, two]).transition().duration(50); test.strictEqual(one.__transition[transition._id].duration, 50); test.strictEqual(two.__transition[transition._id].duration, 50); test.end(); }); tape("transition.duration(value) coerces the specified value to a number", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), transition = d3_selection.selectAll([one, two]).transition().duration("50"); test.strictEqual(one.__transition[transition._id].duration, 50); test.strictEqual(two.__transition[transition._id].duration, 50); test.end(); }); tape("transition.duration(function) passes the expected arguments and context to the function", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), result = [], selection = d3_selection.selectAll([one, two]).data(["one", "two"]), transition = selection.transition().duration(function(d, i, nodes) { result.push([d, i, nodes, this]); }); test.deepEqual(result, [ ["one", 0, transition._groups[0], one], ["two", 1, transition._groups[0], two] ]); test.end(); }); tape("transition.duration(function) sets the duration for each selected element to the number returned by the specified function", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), transition = d3_selection.selectAll([one, two]).transition().duration(function(d, i) { return i * 20; }); test.strictEqual(one.__transition[transition._id].duration, 0); test.strictEqual(two.__transition[transition._id].duration, 20); test.end(); }); tape("transition.duration(function) coerces the value returned by the specified function to a number", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), transition = d3_selection.selectAll([one, two]).transition().duration(function(d, i) { return i * 20 + ""; }); test.strictEqual(one.__transition[transition._id].duration, 0); test.strictEqual(two.__transition[transition._id].duration, 20); test.end(); }); d3-transition-1.1.0/test/transition/each-test.js000066400000000000000000000004471310636727000216050ustar00rootroot00000000000000var tape = require("tape"), d3_selection = require("d3-selection"), d3_transition = require("../../"); tape("transition.each is the same as selection.each", function(test) { test.equal(d3_transition.transition.prototype.each, d3_selection.selection.prototype.each); test.end(); }); d3-transition-1.1.0/test/transition/ease-test.js000066400000000000000000000071411310636727000216200ustar00rootroot00000000000000var tape = require("tape"), jsdom = require("../jsdom"), d3_ease = require("d3-ease"), d3_timer = require("d3-timer"), d3_selection = require("d3-selection"), state = require("./state"); require("../../"); tape("transition.ease() returns the easing function for the first non-null node", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), transition1 = d3_selection.select(one).transition(), transition2 = d3_selection.select(two).transition().ease(d3_ease.easeBounce); test.strictEqual(one.__transition[transition1._id].ease, d3_ease.easeCubic); test.strictEqual(two.__transition[transition2._id].ease, d3_ease.easeBounce); test.strictEqual(transition1.ease(), d3_ease.easeCubic); test.strictEqual(transition2.ease(), d3_ease.easeBounce); test.strictEqual(d3_selection.select(one).transition(transition1).ease(), d3_ease.easeCubic); test.strictEqual(d3_selection.select(two).transition(transition2).ease(), d3_ease.easeBounce); test.strictEqual(d3_selection.selectAll([null, one]).transition(transition1).ease(), d3_ease.easeCubic); test.strictEqual(d3_selection.selectAll([null, two]).transition(transition2).ease(), d3_ease.easeBounce); test.strictEqual(d3_selection.selectAll([one, two]).transition(transition1).ease(), d3_ease.easeCubic); test.strictEqual(d3_selection.selectAll([two, one]).transition(transition2).ease(), d3_ease.easeBounce); test.end(); }); tape("transition.ease(ease) throws an error if ease is not a function", function(test) { var root = jsdom().documentElement, transition = d3_selection.select(root).transition(); test.throws(function() { transition.ease(42); }); test.throws(function() { transition.ease(null); }); test.end(); }); tape("transition.ease(ease) sets the easing function for each selected element to the specified function", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), transition = d3_selection.selectAll([one, two]).transition().ease(d3_ease.easeBounce); test.strictEqual(one.__transition[transition._id].ease, d3_ease.easeBounce); test.strictEqual(two.__transition[transition._id].ease, d3_ease.easeBounce); test.end(); }); tape("transition.ease(ease) passes the easing function the normalized time in [0, 1]", function(test) { var root = jsdom().documentElement, actual, ease = function(t) { actual = t; return t; }; d3_selection.select(root).transition().ease(ease); d3_timer.timeout(function(now) { test.equal(actual, now / 250); test.end(); }, 100); }); tape("transition.ease(ease) does not invoke the easing function on the last frame", function(test) { var root = jsdom().documentElement, ease = function(t) { test.equal(schedule.state, state.RUNNING); return t; }, transition = d3_selection.select(root).transition().ease(ease).on("end", function() { test.end(); }), schedule = root.__transition[transition._id]; }); tape("transition.ease(ease) observes the eased time returned by the easing function", function(test) { var root = jsdom().documentElement, expected, ease = function() { return expected = Math.random() * 2 - 0.5; }, tween = function() { return function(t) { test.equal(t, schedule.state === state.ENDING ? 1 : expected); }; }, transition = d3_selection.select(root).transition().ease(ease).tween("tween", tween).on("end", function() { test.end(); }), schedule = root.__transition[transition._id]; }); d3-transition-1.1.0/test/transition/empty-test.js000066400000000000000000000004531310636727000220400ustar00rootroot00000000000000var tape = require("tape"), d3_selection = require("d3-selection"), d3_transition = require("../../"); tape("transition.empty is the same as selection.empty", function(test) { test.equal(d3_transition.transition.prototype.empty, d3_selection.selection.prototype.empty); test.end(); }); d3-transition-1.1.0/test/transition/filter-test.js000066400000000000000000000031331310636727000221650ustar00rootroot00000000000000var tape = require("tape"), jsdom = require("../jsdom"), d3_selection = require("d3-selection"), d3_transition = require("../../"); tape("transition.filter(selector) retains the elements matching the specified selector", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), transition1 = d3_selection.selectAll([one, two]).data([1, 2]).transition().delay(function(d) { return d * 10; }), transition2 = transition1.filter("#two"); test.equal(transition2 instanceof d3_transition.transition, true); test.deepEqual(transition2._groups, [[two]]); test.equal(transition2._parents, transition1._parents); test.equal(transition2._name, transition1._name); test.equal(transition2._id, transition1._id); test.end(); }); tape("transition.filter(function) retains the elements for which the specified function returns true", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), transition1 = d3_selection.selectAll([one, two]).data([1, 2]).transition().delay(function(d) { return d * 10; }), transition2 = transition1.filter(function() { return this === two; }); test.equal(transition2 instanceof d3_transition.transition, true); test.deepEqual(transition2._groups, [[two]]); test.equal(transition2._parents, transition1._parents); test.equal(transition2._name, transition1._name); test.equal(transition2._id, transition1._id); test.end(); }); d3-transition-1.1.0/test/transition/index-test.js000066400000000000000000000051531310636727000220130ustar00rootroot00000000000000var tape = require("tape"), jsdom = require("../jsdom"), d3_transition = require("../../"); tape("d3.transition() returns a transition on the document element with the null name", function(test) { var document = global.document = jsdom(), root = document.documentElement; try { var transition = d3_transition.transition(), schedule = root.__transition[transition._id]; test.equal(transition.node(), root); test.strictEqual(schedule.name, null); test.end(); } finally { delete global.document; } }); tape("d3.transition(null) returns a transition on the document element with the null name", function(test) { var document = global.document = jsdom(), root = document.documentElement; try { var transition = d3_transition.transition(null), schedule = root.__transition[transition._id]; test.equal(transition.node(), root); test.strictEqual(schedule.name, null); test.end(); } finally { delete global.document; } }); tape("d3.transition(undefined) returns a transition on the document element with the null name", function(test) { var document = global.document = jsdom(), root = document.documentElement; try { var transition = d3_transition.transition(undefined), schedule = root.__transition[transition._id]; test.equal(transition.node(), root); test.strictEqual(schedule.name, null); test.end(); } finally { delete global.document; } }); tape("d3.transition(name) returns a transition on the document element with the specified name", function(test) { var document = global.document = jsdom(), root = document.documentElement; try { var transition = d3_transition.transition("foo"), schedule = root.__transition[transition._id]; test.equal(transition.node(), root); test.strictEqual(schedule.name, "foo"); test.end(); } finally { delete global.document; } }); tape("d3.transition.prototype can be extended", function(test) { global.document = jsdom(); try { var pass = 0; d3_transition.transition.prototype.test = function() { return ++pass; }; test.equal(d3_transition.transition().test(), 1); test.equal(pass, 1); test.end(); } finally { delete d3_transition.transition.prototype.test; delete global.document; } }); tape("transitions are instanceof d3.transition", function(test) { global.document = jsdom(); try { test.equal(d3_transition.transition() instanceof d3_transition.transition, true); test.equal(d3_transition.transition().constructor.name, "Transition"); test.end(); } finally { delete global.document; } }); d3-transition-1.1.0/test/transition/merge-test.js000066400000000000000000000026121310636727000220000ustar00rootroot00000000000000var tape = require("tape"), jsdom = require("../jsdom"), d3_selection = require("d3-selection"), d3_transition = require("../../"); tape("transition.merge(other) merges elements from the specified other transition for null elements in this transition", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), transition1 = d3_selection.selectAll([null, two]).transition(), transition2 = d3_selection.selectAll([one, null]).transition(transition1), transition3 = transition1.merge(transition2); test.equal(transition3 instanceof d3_transition.transition, true); test.deepEqual(transition3._groups, [[one, two]]); test.equal(transition3._parents, transition1._parents); test.equal(transition3._name, transition1._name); test.equal(transition3._id, transition1._id); test.end(); }); tape("transition.merge(other) throws an error if the other transition has a different id", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), transition1 = d3_selection.selectAll([null, two]).transition(), transition2 = d3_selection.selectAll([one, null]).transition(); test.throws(function() { transition1.merge(transition2); }); test.end(); }); d3-transition-1.1.0/test/transition/node-test.js000066400000000000000000000004471310636727000216320ustar00rootroot00000000000000var tape = require("tape"), d3_selection = require("d3-selection"), d3_transition = require("../../"); tape("transition.node is the same as selection.node", function(test) { test.equal(d3_transition.transition.prototype.node, d3_selection.selection.prototype.node); test.end(); }); d3-transition-1.1.0/test/transition/nodes-test.js000066400000000000000000000004531310636727000220120ustar00rootroot00000000000000var tape = require("tape"), d3_selection = require("d3-selection"), d3_transition = require("../../"); tape("transition.nodes is the same as selection.nodes", function(test) { test.equal(d3_transition.transition.prototype.nodes, d3_selection.selection.prototype.nodes); test.end(); }); d3-transition-1.1.0/test/transition/on-test.js000066400000000000000000000116441310636727000213220ustar00rootroot00000000000000var tape = require("tape"), jsdom = require("../jsdom"), d3_timer = require("d3-timer"), d3_selection = require("d3-selection"), state = require("./state"); require("../../"); tape("transition.on(type, listener) throws an error if listener is not a function", function(test) { var root = jsdom().documentElement, transition = d3_selection.select(root).transition(); test.throws(function() { transition.on("start", 42); }); test.end(); }); tape("transition.on(typename) returns the listener with the specified typename, if any", function(test) { var root = jsdom().documentElement, foo = function() {}, bar = function() {}, transition = d3_selection.select(root).transition().on("start", foo).on("start.bar", bar); test.equal(transition.on("start"), foo); test.equal(transition.on("start.foo"), undefined); test.equal(transition.on("start.bar"), bar); test.equal(transition.on("end"), undefined); test.end(); }); tape("transition.on(typename) throws an error if the specified type is not supported", function(test) { var root = jsdom().documentElement, transition = d3_selection.select(root).transition(); test.throws(function() { transition.on("foo"); }); test.end(); }); tape("transition.on(typename, listener) throws an error if the specified type is not supported", function(test) { var root = jsdom().documentElement, transition = d3_selection.select(root).transition(); test.throws(function() { transition.on("foo", function() {}); }); test.end(); }); tape("transition.on(typename, listener) throws an error if the specified listener is not a function", function(test) { var root = jsdom().documentElement, transition = d3_selection.select(root).transition(); test.throws(function() { transition.on("foo", 42); }); test.end(); }); tape("transition.on(typename, null) removes the listener with the specified typename, if any", function(test) { var root = jsdom().documentElement, starts = 0, transition = d3_selection.select(root).transition().on("start.foo", function() { ++starts; }), schedule = root.__transition[transition._id]; test.equal(transition.on("start.foo", null), transition); test.equal(transition.on("start.foo"), undefined); test.equal(schedule.on.on("start.foo"), undefined); d3_timer.timeout(function() { test.equal(starts, 0); test.end(); }); }); tape("transition.on(\"start\", listener) registers a listener for the start event", function(test) { var root = jsdom().documentElement, transition = d3_selection.select(root).transition().on("start", started), schedule = root.__transition[transition._id]; function started() { test.equal(schedule.state, state.STARTING); test.end(); } }); tape("transition.on(\"interrupt\", listener) registers a listener for the interrupt event (during start)", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition = selection.transition().on("interrupt", interrupted), schedule = root.__transition[transition._id]; function interrupted() { test.equal(schedule.state, state.ENDED); test.end(); } d3_timer.timeout(function() { selection.interrupt(); }); }); tape("transition.on(\"interrupt\", listener) registers a listener for the interrupt event (during run)", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition = selection.transition().on("interrupt", interrupted), schedule = root.__transition[transition._id]; function interrupted() { test.equal(schedule.state, state.ENDED); test.end(); } d3_timer.timeout(function() { selection.interrupt(); }, 50); }); tape("transition.on(\"end\", listener) registers a listener for the end event", function(test) { var root = jsdom().documentElement, transition = d3_selection.select(root).transition().duration(50).on("end", ended), schedule = root.__transition[transition._id]; function ended() { test.equal(schedule.state, state.ENDING); test.end(); } }); tape("transition.on(typename, listener) uses copy-on-write to apply changes", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), foo = function() {}, bar = function() {}, transition = d3_selection.selectAll([one, two]).transition(), schedule1 = one.__transition[transition._id], schedule2 = two.__transition[transition._id]; transition.on("start", foo); test.equal(schedule1.on.on("start"), foo); test.equal(schedule2.on, schedule1.on); transition.on("start", bar); test.equal(schedule1.on.on("start"), bar); test.equal(schedule2.on, schedule1.on); d3_selection.select(two).transition(transition).on("start", foo); test.equal(schedule1.on.on("start"), bar); test.equal(schedule2.on.on("start"), foo); test.end(); }); d3-transition-1.1.0/test/transition/remove-test.js000066400000000000000000000024601310636727000221770ustar00rootroot00000000000000var tape = require("tape"), jsdom = require("../jsdom"), d3_timer = require("d3-timer"), d3_selection = require("d3-selection"); require("../../"); tape("transition.remove() creates an end listener to remove the element", function(test) { var document = jsdom(), root = document.documentElement, body = document.body, selection = d3_selection.select(body), transition = selection.transition().remove().on("start", started).on("end", ended); function started() { test.equal(body.parentNode, root); } function ended() { test.equal(body.parentNode, null); test.end(); } d3_timer.timeout(function(elapsed) { test.equal(body.parentNode, root); }); }); tape("transition.remove() creates an end listener named end.remove", function(test) { var document = jsdom(), root = document.documentElement, body = document.body, selection = d3_selection.select(body), transition = selection.transition().remove().on("start", started).on("end", ended); transition.on("end.remove").call(body); test.equal(body.parentNode, null); transition.on("end.remove", null); root.appendChild(body); function started() { test.equal(body.parentNode, root); } function ended() { test.equal(body.parentNode, root); test.end(); } }); d3-transition-1.1.0/test/transition/select-test.js000066400000000000000000000042461310636727000221650ustar00rootroot00000000000000var tape = require("tape"), jsdom = require("../jsdom"), d3_selection = require("d3-selection"), d3_transition = require("../../"); tape("transition.select(selector) selects the descendants matching the specified selector, then derives a transition", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), transition1 = d3_selection.selectAll([one, two]).data([1, 2]).transition().delay(function(d) { return d * 10; }), transition2 = transition1.select("child"); test.equal(transition2 instanceof d3_transition.transition, true); test.deepEqual(transition2._groups, [[one.firstChild, two.firstChild]]); test.equal(transition2._parents, transition1._parents); test.equal(transition2._name, transition1._name); test.equal(transition2._id, transition1._id); test.equal(one.firstChild.__data__, 1); test.equal(two.firstChild.__data__, 2); test.equal(one.firstChild.__transition[transition1._id].delay, 10); test.equal(two.firstChild.__transition[transition1._id].delay, 20); test.end(); }); tape("transition.select(function) selects the descendants returned by the specified function, then derives a transition", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), transition1 = d3_selection.selectAll([one, two]).data([1, 2]).transition().delay(function(d) { return d * 10; }), transition2 = transition1.select(function() { return this.firstChild; }); test.equal(transition2 instanceof d3_transition.transition, true); test.deepEqual(transition2._groups, [[one.firstChild, two.firstChild]]); test.equal(transition2._parents, transition1._parents); test.equal(transition2._name, transition1._name); test.equal(transition2._id, transition1._id); test.equal(one.firstChild.__data__, 1); test.equal(two.firstChild.__data__, 2); test.equal(one.firstChild.__transition[transition1._id].delay, 10); test.equal(two.firstChild.__transition[transition1._id].delay, 20); test.end(); }); d3-transition-1.1.0/test/transition/selectAll-test.js000066400000000000000000000043201310636727000226070ustar00rootroot00000000000000var tape = require("tape"), jsdom = require("../jsdom"), d3_selection = require("d3-selection"), d3_transition = require("../../"); tape("transition.selectAll(selector) selects the descendants matching the specified selector, then derives a transition", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), transition1 = d3_selection.selectAll([one, two]).data([1, 2]).transition().delay(function(d) { return d * 10; }), transition2 = transition1.selectAll("child"); test.equal(transition2 instanceof d3_transition.transition, true); test.deepEqual(transition2._groups, [[one.firstChild], [two.firstChild]]); test.deepEqual(transition2._parents, [one, two]); test.equal(transition2._name, transition1._name); test.equal(transition2._id, transition1._id); test.equal("__data__" in one.firstChild, false); test.equal("__data__" in two.firstChild, false); test.equal(one.firstChild.__transition[transition1._id].delay, 10); test.equal(two.firstChild.__transition[transition1._id].delay, 20); test.end(); }); tape("transition.selectAll(function) selects the descendants returned by the specified function, then derives a transition", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), transition1 = d3_selection.selectAll([one, two]).data([1, 2]).transition().delay(function(d) { return d * 10; }), transition2 = transition1.selectAll(function() { return [this.firstChild]; }); test.equal(transition2 instanceof d3_transition.transition, true); test.deepEqual(transition2._groups, [[one.firstChild], [two.firstChild]]); test.deepEqual(transition2._parents, [one, two]); test.equal(transition2._name, transition1._name); test.equal(transition2._id, transition1._id); test.equal("__data__" in one.firstChild, false); test.equal("__data__" in two.firstChild, false); test.equal(one.firstChild.__transition[transition1._id].delay, 10); test.equal(two.firstChild.__transition[transition1._id].delay, 20); test.end(); }); d3-transition-1.1.0/test/transition/selection-test.js000066400000000000000000000011601310636727000226630ustar00rootroot00000000000000var tape = require("tape"), jsdom = require("../jsdom"), d3_selection = require("d3-selection"); require("../../"); tape("transition.selection() returns the transition’s selection", function(test) { var document = jsdom("

one

two

"), selection0 = d3_selection.select(document.body).selectAll("h1"), transition = selection0.transition(), selection1 = transition.selection(); test.ok(selection1 instanceof d3_selection.selection); test.equal(selection1._groups, selection0._groups); test.equal(selection1._parents, selection0._parents); test.end(); }); d3-transition-1.1.0/test/transition/size-test.js000066400000000000000000000004471310636727000216570ustar00rootroot00000000000000var tape = require("tape"), d3_selection = require("d3-selection"), d3_transition = require("../../"); tape("transition.size is the same as selection.size", function(test) { test.equal(d3_transition.transition.prototype.size, d3_selection.selection.prototype.size); test.end(); }); d3-transition-1.1.0/test/transition/state.js000066400000000000000000000002231310636727000210400ustar00rootroot00000000000000exports.CREATED = 0; exports.SCHEDULED = 1; exports.STARTING = 2; exports.STARTED = 3; exports.RUNNING = 4; exports.ENDING = 5; exports.ENDED = 6; d3-transition-1.1.0/test/transition/style-test.js000066400000000000000000000150101310636727000220350ustar00rootroot00000000000000var tape = require("tape"), jsdom = require("../jsdom"), d3_ease = require("d3-ease"), d3_timer = require("d3-timer"), d3_interpolate = require("d3-interpolate"), d3_selection = require("d3-selection"); require("../../"); tape("transition.style(name, value) creates an tween to the specified value", function(test) { var root = jsdom().documentElement, ease = d3_ease.easeCubic, duration = 250, interpolate = d3_interpolate.interpolateRgb("red", "blue"), selection = d3_selection.select(root).style("color", "red"), transition = selection.transition().style("color", "blue"); d3_timer.timeout(function(elapsed) { test.strictEqual(root.style.getPropertyValue("color"), interpolate(ease(elapsed / duration))); test.end(); }, 125); }); tape("transition.style(name, value) creates an tween to the value returned by the specified function", function(test) { var root = jsdom().documentElement, ease = d3_ease.easeCubic, duration = 250, interpolate = d3_interpolate.interpolateRgb("red", "blue"), selection = d3_selection.select(root).style("color", "red"), transition = selection.transition().style("color", function() { return "blue"; }); d3_timer.timeout(function(elapsed) { test.strictEqual(root.style.getPropertyValue("color"), interpolate(ease(elapsed / duration))); test.end(); }, 125); }); tape("transition.style(name, value) immediately evaluates the specified function with the expected context and arguments", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), ease = d3_ease.easeCubic, duration = 250, interpolate1 = d3_interpolate.interpolateRgb("cyan", "red"), interpolate2 = d3_interpolate.interpolateRgb("magenta", "green"), selection = d3_selection.selectAll([one, two]).data(["red", "green"]), result = [], transition = selection.transition().style("color", function(d, i, nodes) { result.push([d, i, nodes, this]); return d; }); test.deepEqual(result, [ ["red", 0, [one, two], one], ["green", 1, [one, two], two] ]); d3_timer.timeout(function(elapsed) { test.strictEqual(one.style.getPropertyValue("color"), interpolate1(ease(elapsed / duration))); test.strictEqual(two.style.getPropertyValue("color"), interpolate2(ease(elapsed / duration))); test.end(); }, 125); }); tape("transition.style(name, value) constructs an interpolator using the current value on start", function(test) { var root = jsdom().documentElement, ease = d3_ease.easeCubic, duration = 250, interpolate = d3_interpolate.interpolateRgb("red", "blue"), selection = d3_selection.select(root), transition = selection.transition().on("start", function() { selection.style("color", "red"); }).style("color", function() { return "blue"; }); d3_timer.timeout(function(elapsed) { test.strictEqual(root.style.getPropertyValue("color"), interpolate(ease(elapsed / duration))); test.end(); }, 125); }); tape("transition.style(name, null) creates an tween which removes the specified style post-start", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root).style("color", "red"), transition = selection.transition().style("color", null).on("start", started); function started() { test.equal(root.style.getPropertyValue("color"), "red"); } d3_timer.timeout(function(elapsed) { test.equal(root.style.getPropertyValue("color"), ""); test.end(); }); }); tape("transition.style(name, value) creates an tween which removes the specified style post-start if the specified function returns null", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root).style("color", "red"), transition = selection.transition().style("color", function() {}).on("start", started); function started() { test.equal(root.style.getPropertyValue("color"), "red"); } d3_timer.timeout(function(elapsed) { test.equal(root.style.getPropertyValue("color"), ""); test.end(); }); }); tape("transition.style(name, value) interpolates numbers", function(test) { var root = jsdom().documentElement, ease = d3_ease.easeCubic, duration = 250, interpolate = d3_interpolate.interpolateNumber(0, 1), selection = d3_selection.select(root).style("opacity", 0), transition = selection.transition().style("opacity", 1); d3_timer.timeout(function(elapsed) { test.strictEqual(root.style.getPropertyValue("opacity"), interpolate(ease(elapsed / duration)) + ""); test.end(); }, 125); }); tape("transition.style(name, value) interpolates strings", function(test) { var root = jsdom().documentElement, ease = d3_ease.easeCubic, duration = 250, interpolate = d3_interpolate.interpolateString("1px", "2px"), selection = d3_selection.select(root).style("font-size", "1px"), transition = selection.transition().style("font-size", "2px"); d3_timer.timeout(function(elapsed) { test.strictEqual(root.style.getPropertyValue("font-size"), interpolate(ease(elapsed / duration))); test.end(); }, 125); }); tape("transition.style(name, value) interpolates colors", function(test) { var root = jsdom().documentElement, ease = d3_ease.easeCubic, duration = 250, interpolate = d3_interpolate.interpolateRgb("#f00", "#00f"), selection = d3_selection.select(root).style("color", "#f00"), transition = selection.transition().style("color", "#00f"); d3_timer.timeout(function(elapsed) { test.strictEqual(root.style.getPropertyValue("color"), interpolate(ease(elapsed / duration))); test.end(); }, 125); }); tape("transition.style(name, value) creates an styleTween with the specified name", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root).style("color", "red"), transition = selection.transition().style("color", "blue"); test.equal(transition.styleTween("color").call(root)(0.5), "rgb(128, 0, 128)"); test.end(); }); tape("transition.style(name, value) creates a tween with the name \"style.name\"", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root).style("color", "red"), transition = selection.transition().style("color", "blue"); transition.tween("style.color").call(root)(0.5); test.equal(root.style.getPropertyValue("color"), "rgb(128, 0, 128)"); test.end(); }); d3-transition-1.1.0/test/transition/styleTween-test.js000066400000000000000000000130711310636727000230450ustar00rootroot00000000000000var tape = require("tape"), jsdom = require("../jsdom"), d3_ease = require("d3-ease"), d3_timer = require("d3-timer"), d3_interpolate = require("d3-interpolate"), d3_selection = require("d3-selection"), state = require("./state"); require("../../"); tape("transition.styleTween(name, value) defines a style tween using the interpolator returned by the specified function", function(test) { var root = jsdom().documentElement, interpolate = d3_interpolate.interpolateHcl("red", "blue"), ease = d3_ease.easeCubic, transition = d3_selection.select(root).transition().styleTween("color", function() { return interpolate; }); d3_timer.timeout(function(elapsed) { test.deepEqual(root.style.getPropertyValue("color"), interpolate(ease(elapsed / 250))); test.deepEqual(root.style.getPropertyPriority("color"), ""); test.end(); }, 125); }); tape("transition.styleTween(name, value, priority) defines a style tween using the interpolator returned by the specified function", function(test) { var root = jsdom().documentElement, interpolate = d3_interpolate.interpolateHcl("red", "blue"), ease = d3_ease.easeCubic, transition = d3_selection.select(root).transition().styleTween("color", function() { return interpolate; }, "important"); d3_timer.timeout(function(elapsed) { test.deepEqual(root.style.getPropertyValue("color"), interpolate(ease(elapsed / 250))); test.deepEqual(root.style.getPropertyPriority("color"), "important"); test.end(); }, 125); }); tape("transition.styleTween(name, value) invokes the value function with the expected context and arguments", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), result = [], transition = d3_selection.selectAll([one, two]).data(["one", "two"]).transition().styleTween("color", function(d, i, nodes) { result.push([d, i, nodes, this]); }); d3_timer.timeout(function(elapsed) { test.deepEqual(result, [ ["one", 0, [one, two], one], ["two", 1, [one, two], two] ]); test.end(); }); }); tape("transition.styleTween(name, value) passes the eased time to the interpolator", function(test) { var root = jsdom().documentElement, then = d3_timer.now(), duration = 250, ease = d3_ease.easeCubic, transition = d3_selection.select(root).transition().styleTween("color", function() { return interpolate; }).on("end", function() { test.end(); }), schedule = root.__transition[transition._id]; function interpolate(t) { "use strict"; test.equal(this, undefined); test.equal(t, schedule.state === state.ENDING ? 1 : ease((d3_timer.now() - then) / duration)); } }); tape("transition.styleTween(name, value) allows the specified function to return null for a noop", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root).style("color", "red"), transition = selection.transition().styleTween("color", function() {}); d3_timer.timeout(function(elapsed) { test.deepEqual(root.style.getPropertyValue("color"), "red"); test.end(); }, 125); }); tape("transition.styleTween(name, value) coerces the specified name to a string", function(test) { var root = jsdom().documentElement, interpolate = d3_interpolate.interpolateHcl("red", "blue"), ease = d3_ease.easeCubic, transition = d3_selection.select(root).transition().styleTween({toString: function() { return "color"; }}, function() { return interpolate; }); d3_timer.timeout(function(elapsed) { test.deepEqual(root.style.getPropertyValue("color"), interpolate(ease(elapsed / 250))); test.end(); }, 125); }); tape("transition.styleTween(name, value) throws an error if value is not null and not a function", function(test) { var root = jsdom().documentElement, transition = d3_selection.select(root).transition(); test.throws(function() { transition.styleTween("color", 42); }); test.end(); }); tape("transition.styleTween(name, null) removes the specified style tween", function(test) { var root = jsdom().documentElement, interpolate = d3_interpolate.interpolateHcl("red", "blue"), transition = d3_selection.select(root).transition().styleTween("color", function() { return interpolate; }).styleTween("color", null); test.equal(transition.styleTween("color"), null); test.equal(transition.tween("style.color"), null); d3_timer.timeout(function(elapsed) { test.strictEqual(root.style.getPropertyValue("color"), ""); test.end(); }, 125); }); tape("transition.styleTween(name) returns the style tween with the specified name", function(test) { var root = jsdom().documentElement, interpolate = d3_interpolate.interpolateHcl("red", "blue"), tween = function() { return interpolate; }, transition = d3_selection.select(root).transition().styleTween("color", tween).on("start", started).on("end", ended); test.equal(transition.styleTween("color"), tween); test.equal(transition.styleTween("bar"), null); function started() { test.equal(transition.styleTween("color"), tween); } function ended() { test.equal(transition.styleTween("color"), tween); test.end(); } }); tape("transition.styleTween(name) coerces the specified name to a string", function(test) { var root = jsdom().documentElement, tween = function() {}, transition = d3_selection.select(root).transition().styleTween("color", tween); test.equal(transition.styleTween({toString: function() { return "color"; }}), tween); test.end(); }); d3-transition-1.1.0/test/transition/text-test.js000066400000000000000000000042761310636727000216750ustar00rootroot00000000000000var tape = require("tape"), jsdom = require("../jsdom"), d3_timer = require("d3-timer"), d3_selection = require("d3-selection"); require("../../"); tape("transition.text(value) creates a tween to set the text content to the specified value post-start", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition = selection.transition().text("hello").on("start", started); function started() { test.equal(root.textContent, ""); } d3_timer.timeout(function(elapsed) { test.equal(root.textContent, "hello"); test.end(); }); }); tape("transition.text(value) creates a tween to set the text content to the value returned by the specified function post-start", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition = selection.transition().text(function() { return "hello"; }).on("start", started); function started() { test.equal(root.textContent, ""); } d3_timer.timeout(function(elapsed) { test.equal(root.textContent, "hello"); test.end(); }); }); tape("transition.text(value) immediately evaluates the specified function with the expected context and arguments", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), selection = d3_selection.selectAll([one, two]).data(["red", "green"]), result = [], transition = selection.transition().text(function(d, i, nodes) { result.push([d, i, nodes, this]); return d; }); test.deepEqual(result, [ ["red", 0, [one, two], one], ["green", 1, [one, two], two] ]); d3_timer.timeout(function(elapsed) { test.strictEqual(one.textContent, "red"); test.strictEqual(two.textContent, "green"); test.end(); }); }); tape("transition.text(value) creates a tween with the name \"text\"", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition = selection.transition().text("hello"); test.equal(transition.tween("text").call(root), undefined); test.equal(root.textContent, "hello"); test.end(); }); d3-transition-1.1.0/test/transition/transition-test.js000066400000000000000000000015351310636727000230760ustar00rootroot00000000000000var tape = require("tape"), jsdom = require("../jsdom"), d3_timer = require("d3-timer"), d3_selection = require("d3-selection"); require("../../"); tape("transition.transition() allows preceeding transitions with zero duration to end naturally", function(test) { var end0 = false, end1 = false, end2 = false, root = jsdom().documentElement, selection = d3_selection.select(root), transition0 = selection.transition().duration(0).on("end", function() { end0 = true; }), transition1 = selection.transition().duration(0).on("end", function() { end1 = true; }), transition2 = transition0.transition().duration(0).on("end", function() { end2 = true; }); d3_timer.timeout(function(elapsed) { test.equal(end0, true); test.equal(end1, true); test.equal(end2, true); test.end(); }, 50); }); d3-transition-1.1.0/test/transition/tween-test.js000066400000000000000000000141311310636727000220220ustar00rootroot00000000000000var tape = require("tape"), jsdom = require("../jsdom"), d3_ease = require("d3-ease"), d3_timer = require("d3-timer"), d3_interpolate = require("d3-interpolate"), d3_selection = require("d3-selection"), state = require("./state"); require("../../"); tape("transition.tween(name, value) defines an tween using the interpolator returned by the specified function", function(test) { var root = jsdom().documentElement, value, interpolate = function(t) { value = t; }, transition = d3_selection.select(root).transition().tween("foo", function() { return interpolate; }); d3_timer.timeout(function(elapsed) { test.equal(value, d3_ease.easeCubic(elapsed / 250)); test.end(); }, 125); }); tape("transition.tween(name, value) invokes the value function with the expected context and arguments", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), result = [], transition = d3_selection.selectAll([one, two]).data(["one", "two"]).transition().tween("foo", function(d, i, nodes) { result.push([d, i, nodes, this]); }); d3_timer.timeout(function(elapsed) { test.deepEqual(result, [ ["one", 0, [one, two], one], ["two", 1, [one, two], two] ]); test.end(); }); }); tape("transition.tween(name, value) passes the eased time to the interpolator", function(test) { var root = jsdom().documentElement, then = d3_timer.now(), duration = 250, ease = d3_ease.easeCubic, transition = d3_selection.select(root).transition().tween("foo", function() { return interpolate; }).on("end", function() { test.end(); }), schedule = root.__transition[transition._id]; function interpolate(t) { "use strict"; test.equal(this, null); test.equal(t, schedule.state === state.ENDING ? 1 : ease((d3_timer.now() - then) / duration)); } }); tape("transition.tween(name, value) allows the specified function to return null for a noop", function(test) { var root = jsdom().documentElement, selection = d3_selection.select(root), transition = selection.transition().tween("foo", function() {}); test.end(); }); tape("transition.tween(name, value) uses copy-on-write to apply changes", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), foo = function() {}, bar = function() {}, transition = d3_selection.selectAll([one, two]).transition(), schedule1 = one.__transition[transition._id], schedule2 = two.__transition[transition._id]; transition.tween("foo", foo); test.deepEqual(schedule1.tween, [{name: "foo", value: foo}]); test.equal(schedule2.tween, schedule1.tween); transition.tween("foo", bar); test.deepEqual(schedule1.tween, [{name: "foo", value: bar}]); test.equal(schedule2.tween, schedule1.tween); d3_selection.select(two).transition(transition).tween("foo", foo); test.deepEqual(schedule1.tween, [{name: "foo", value: bar}]); test.deepEqual(schedule2.tween, [{name: "foo", value: foo}]); test.end(); }); tape("transition.tween(name, value) uses copy-on-write to apply removals", function(test) { var document = jsdom("

"), one = document.querySelector("#one"), two = document.querySelector("#two"), foo = function() {}, transition = d3_selection.selectAll([one, two]).transition(), schedule1 = one.__transition[transition._id], schedule2 = two.__transition[transition._id]; transition.tween("foo", foo); test.deepEqual(schedule1.tween, [{name: "foo", value: foo}]); test.equal(schedule2.tween, schedule1.tween); transition.tween("bar", null); test.deepEqual(schedule1.tween, [{name: "foo", value: foo}]); test.equal(schedule2.tween, schedule1.tween); transition.tween("foo", null); test.deepEqual(schedule1.tween, []); test.equal(schedule2.tween, schedule1.tween); d3_selection.select(two).transition(transition).tween("foo", foo); test.deepEqual(schedule1.tween, []); test.deepEqual(schedule2.tween, [{name: "foo", value: foo}]); test.end(); }); tape("transition.tween(name, value) coerces the specified name to a string", function(test) { var root = jsdom().documentElement, tween = function() {}, transition = d3_selection.select(root).transition().tween({toString: function() { return "foo"; }}, tween); test.equal(transition.tween("foo"), tween); test.end(); }); tape("transition.tween(name) coerces the specified name to a string", function(test) { var root = jsdom().documentElement, tween = function() {}, transition = d3_selection.select(root).transition().tween("foo", tween); test.equal(transition.tween({toString: function() { return "foo"; }}), tween); test.end(); }); tape("transition.tween(name, value) throws an error if value is not null and not a function", function(test) { var root = jsdom().documentElement, transition = d3_selection.select(root).transition(); test.throws(function() { transition.tween("foo", 42); }); test.end(); }); tape("transition.tween(name, null) removes the specified tween", function(test) { var root = jsdom().documentElement, frames = 0, interpolate = function() { ++frames; }, transition = d3_selection.select(root).transition().tween("foo", function() { return interpolate; }).tween("foo", null); test.equal(transition.tween("foo"), null); d3_timer.timeout(function(elapsed) { test.strictEqual(frames, 0); test.end(); }, 125); }); tape("transition.tween(name) returns the tween with the specified name", function(test) { var root = jsdom().documentElement, tween = function() {}, transition = d3_selection.select(root).transition().tween("foo", tween).on("start", started).on("end", ended); test.equal(transition.tween("foo"), tween); test.equal(transition.tween("bar"), null); function started() { test.equal(transition.tween("foo"), tween); } function ended() { test.equal(transition.tween("foo"), tween); test.end(); } });