9

我正在使用 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 的最佳方式是什么？我必须再次调用同一个句子还是更好的方法？

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

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

和

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

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

谢谢！

4

1 回答 1

18

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

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]);
于 2012-05-22T23:04:09.107 回答