D3開發筆記

 

 caniuse.com

Object Constancy

http://bost.ocks.org/mike/constancy/

http://corner.squareup.com/2012/04/building-analytics.html

To achieve object constancy with D3.js, specify a key function as the second argument to selection.data. This function takes a data point as input and returns a corresponding key: a string, such as a name, that uniquely identifies the data point.

Key functions can be useful for improving performance independent of transitions. For example, if you filter a large table, you can use a key function to reduce the number of DOM modifications: reorder DOM elements in the update selection rather than regenerating them

Transitions between unrelated datasets or dimensions (e.g., from temperature to stock price) should use a simpler cross-fade or cut rather than gratuitous, nonsensical movement.

 

1. enter - incoming elements, entering the stage.
2. update - persistent elements, staying on stage.
3. exit - outgoing elements, exiting the stage(The exit selection is the reflection of the enter selection: it contains the leftover elements for which there is no corresponding data).

d3.select()

d3.selectAll().data([], function(){})

d3.transition(element)


 selectAll + data + enter + append 

 

Element.style("fill", function(data, index){})

Element.attr("cx", function(data, index){})