javascript - 在 d3.js 中重新绑定(bind)数据的最佳方式

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]。重新绑定(bind)和显示新 html 的最佳方式是什么？我必须再次调用相同的句子还是更好的方法？

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

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

和

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

如果我执行 obj1.field = 'newValue' 会发生什么。重新绑定(bind)是如何完成的？

谢谢!

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