在d3.js中重新绑定数据的最佳方法

Question

我正在使用d3.js库来生成基于数据的内容.

这是一个简化的例子.

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

如果我改变我的数组,例如新数据是[5,3].如何重新绑定和显示新的HTML？我是否必须再次拨打同一句话,还是更好的方式？

考虑更复杂的数据结构的情况.即

data_arr = [obj1, obj2, obj3, obj4]; 

和

element.innerHTML = '<div id="innerDiv">' + d.field + '</div>';

如果我做obj1.field ='newValue'会发生什么.如何重新绑定？

谢谢!

Answer 1

使用功能.例如,这是一个将从字符串数组填充列表的函数:

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

现在,如果您要初始化列表,可以说:

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

然后如果你想更新,你可以说:

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

如果您愿意(并且您不需要方法链接),则可以在没有selection.call的情况下编写此代码:

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