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){})

posted @ 2014-12-27 22:36  Derek_Hu  阅读(257)  评论(0编辑  收藏  举报