javascript - Rendering updated data in wrapped elements -

i'm new d3, , struggling understand data binding. here fiddle code below.

let's have data updated later. note 6 becomes 1.

data1 = [     { key: 'orig7', val: 7 },     { key: 'orig3', val: 3 },     { key: 'orig6', val: 6 } ]; data2 = [     { key: 'orig7', val: 7 },     { key: 'orig3', val: 3 },     { key: 'orig6', val: 1 },     { key: 'new5', val: 5 } ]; 

then render them. code requires data embedded deeper the elememt. here 2 render functions; differ in first 1 simple, without such wrapping, , second 1 creates inner div around text.

function render1(data) {     var result = d3.select('#list1').selectall('.item')         .data(data, function(d, i) { return d.key });     result.enter()         .append('div')             .classed('item', true)                       // set div     result                                               // set text in div         .text(function(d, i) { return '' + d.key + "=" + d.val; });     result.exit().remove();     result.sort(function(a, b) { return a.val < b.val ? -1 : 1 }); }  function render2(data) {     var result = d3.select('#list2').selectall('.item')         .data(data, function(d, i) { return d.key });     result.enter()         .append('div')             .classed('item', true)         .append('div')                                   // set *inner* div     result.selectall('div')                              // set text in inner div         .text(function(d, i) { return '' + d.key + "=" + d.val; });     result.exit().remove();     result.sort(function(a, b) { return a.val < b.val ? -1 : 1 }); } 

let's render data both render functions.

render1(data1); render1(data2);  render2(data1); render2(data2); 

the output follows:

orig6=1 orig3=3 new5=5 orig7=7  orig6=6 orig3=3 new5=5 orig7=7 

the sort works well, operates on data stored in .item.

however, there discrepancy in text. if insert inner div, inherit datum parent, datum not updated, , remains 6 (whereas reflect updated value 1, in first rendered example).

where inner div copy of data, , how can force updated when new data gets bound?

edit: title had nothing question; apologies.

the solution incredibly trivial. have change

result.selectall('div') 

to

result.select('div') 

complete demo here. if use .select(), data bound current selection (the "base" new selection) bound newly-selected elements. if use .selectall(), isn't case. that's you've been seeing.

it may seem counter-intuitive use .select() here, you're selecting multiple elements. however, keep in mind original selection contains multiple elements , selector executed each of them. is, each element in current selection, 1 element selected .select() (which need in case), , multiple elements .selectall() (which makes sense tree-like hierarchies).