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

Best way to rebind data in d3.js

本文关键字：绑定 数据 方法 最佳 js d3 新绑定      更新时间：2023-09-26

我正在使用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'会发生什么。如何重新绑定？

谢谢！

使用函数。例如，下面是一个将从字符串数组填充列表的函数：

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]);
相关文章：