javascript - How D3 key function in data binding works -

all:

[update]

finally figure out how d3 key function works conceptually: when using .data(newdata, key_function), function extract old bined data element , put key function key, , same thing newdata, , compare them, if same, replace old data new data. important thing(to me) here is: key( old data , new data) generated current key_function, once change key function, , if still want bind data original element, need find way make sure key can consistent.

the official explain here(according cool blue): https://github.com/mbostock/d3/wiki/selections#data

i new d3 data binding, after reading http://bost.ocks.org/mike/selection/ , there still 1 question how d3 key function works:

i wondering if each round of data update independent or relates key specified previous round data binding?(how key stored: stored in element attribute? deleted if no key function specified later)

like

1st round data binding:

var letters = [   {name: "a", frequency: .08167},   {name: "b", frequency: .01492},   {name: "c", frequency: .02780},   {name: "d", frequency: .04253},   {name: "e", frequency: .12702} ];  function name(d) {   return d.name; };  var color = d3.scale.category20();  var divs = d3.selectall("div")              .data(letters, name); divs.enter()     .append("div")     .style("width", 50)     .style("height", function(d, i){         return d.frequency*500+"px";     })     .style("background-color", function(d, i){         return color(i);     }); 

then sort data , bind again:

    letters.sort(function(a, b){         return a.frequency - b.frequency;     }); 

[1] key function binding:

    divs.data(letters, name)         .transition()         .style("background-color", function(d, i){             return color(i);         })         .style("height", function(d, i){             return d.frequency*3000+"px";         }); 

or [2] without key function binding:

    divs.data(letters)         .transition()         .style("background-color", function(d, i){             return color(i);         })         .style("height", function(d, i){             return d.frequency*3000+"px";         }); 

could 1 give me explanation happened these 2 different data binding? main confuse if did not specify key function in data updating, old key binded element removed , based on index until key function specified?

the key function doesn't change underlying data, tells d3 how extract identifying attribute -- each datum (in data passed .data() , bound dom elements) passed key function, return value used match elements (i.e. same value returned both dom element , datum).

if change key functions when updating, computed selections change accordingly. that's there it.