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

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

1 个答案: