Best way to rebind data in d3.js

d3.js, javascript

Solution

Use a function. For example, here's a function that will populate a list from an array of strings:

function list(ul, data) {
  var li = ul.selectAll("li").data(data);
  li.exit().remove();
  li.enter().append("li");
  li.text(function(d) { return d; });
}

Now if you want to initialize your list, you can say:

d3.select("#list").call(list, [0, 1, 2, 3, 4]);

Then later if you want to update, you can say:

d3.select("#list").call(list, [5, 3]);

If you prefer (and you don't need method chaining), you can write this without selection.call:

list(d3.select("#list"), [5, 3]);

Problem

I am using d3.js library to generate contents based on data. Here is a simplified example. ``` data_arr = [0,1,2,3,4]; d3.select("#mylist").selectAll('li').data(data_arr).enter().append("li").html( function(d) { var element = document.createElement('div'); element.innerHTML = '<div id="innerDiv">' + d + '</div>'; return element.innerHTML; }); ``` If I change my array, for example the new data is [5,3]. How is the best way to rebind and show the new html? Do I have to call the same sentence again or is it a better way? Consider the case of a more complex data structure. i.e. ``` data_arr = [obj1, obj2, obj3, obj4]; ``` and ``` element.innerHTML = '<div id="innerDiv">' + d.field + '</div>'; ``` What happens if I do obj1.field = 'newValue'. How is the rebind done? Thanks!

Original source