Question

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!

Answer 1

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]);