Release Notes

Release Notes

2.0.0 - August 23, 2011

Selections

The enter-update pattern has been simplified: the enter selection now merges into the update selection when you append or insert. This new approach reduces code duplication between enter and update.

For example, say you had a selection of circles and wanted to update their radii, while also adding and removing nodes. Previously you had to call the attr operator twice, separately for enter and update:

var circle = svg.selectAll("circle").data([data]);
circle.exit().remove();
circle.enter().append("svg:circle").attr("r", radius);
circle.attr("r", radius);

If you then want circle to refer to all the on-screen nodes (enter plus update), you'd have to reselect as well:

circle = svg.selectAll("circle");

In 2.0, you can eliminate this duplicate code because entering nodes will add them to both the enter selection and the update selection. Running operators such as attr on the update selection after enter will apply to both the entering and updating nodes:

var circle = svg.selectAll("circle").data([data]);
circle.exit().remove();
circle.enter().append("svg:circle");
circle.attr("r", radius);

If you want to run operators only on the updating nodes, you can run them on the update selection before entering new nodes.

Selection's select and selectAll operators can now take functions.

Transitions

Transitions are now arrays of elements, just like selections. You can now inspect them in the developer console. Each array is wrapped in an object that stores the delay and duration of the associated transition. Transition's each operator can now be called with one argument, with the same behavior as selection. Transitions also expose an id property, which can be useful for debugging concurrent transitions; this id is inherited by subtransitions, fixing a bug where nested transitions would compete for element ownership.

Transition has a new tween operator which is used internally by all the other tweens (style, attr, etc.). You can use this operator directly if you want to define a custom tween as part of the transition; use this instead of listening for a transition "tick" event.

SVG

A new axis component has been added to the d3.svg module.

Internals

D3 now has an extensive test suite built with Vows. As of the 2.0.0 release, we have 1,200+ tests and 90% coverage of the core library. More tests are under development. The tests are written to test the behavior of each of D3's operators, and may be interesting to explore if you have questions about how D3 works, complementing the API reference.

Selection and transition are now defined using prototype injection rather than direct extension. This improves performance and reduces memory overhead, as the majority of methods are defined on the object's prototype rather than on each instance. Also, it makes the code cleaner as each operator is fully separable and defined in its own source file. This also fixes a few bugs, such as the missing empty operator on the enter selection. Prototype injection also means that selections and transitions can be extended! You can now override the behavior of D3's core operators, or add your own. This may be particularly useful to provide compatibility with nonstandard browsers. You can also use JavaScript's instanceof operator to see whether an object is a d3.selection or d3.transition instance.