Javascript 嵌套数据模型的d3更新模式

我一直在努力解决更新d3中嵌套数据的问题，代码：

var data = [
  {key: 1, values:[1, 2, 3]},
  {key: 2, values:[3, 4, 5]},
 ] 
function update(data) {
  var table = d3.select('#gogo')
  var tr = table.selectAll('tr')
    .data(data)

  tr.enter().append('tr')

  var td = tr.selectAll("td")
    .data(d=>d.values )
    .text(d=>d)

  td.enter().append('td')
    .text(d=>d)
}
update(data)
ref()
function ref() {
  setInterval(()=>{
    data.map(item=> {
      for (var i=0; i<3; i++) {
        item.values[i] = Math.floor(Math.random() * 100) + 1
      }
    })
    update(data)
  }, 1000)
}

---

上面代码的问题是d3没有呈现第一次运行的updatedata，如果注释掉ref函数，d3只是没有将新数据附加到html中。

我知道这可能是一个需要回答的重复问题，但我仍然认为它可能对许多不熟悉d3的开发人员有用。另外，我在这里提到的博客真的非常有用

为了克服D3V3中的可用性问题，引入了一个新的选择类合并

马克的话：

D34.0消除了enter.append的魔力。事实上，D34.0完全消除了enter和normal选择之间的区别：现在只有一类选择。取而代之的是，新的selection.merge方法可以统一输入和更新选择：

您可以在此处阅读更多信息：

此外，我还看到了这个博客，我想与大家分享一下：

在您的示例中，使用相同的合并逻辑，下面是代码段：

风险值数据=[ {键：1，值：[1,2,3]}， {键：2，值：[3,4,5]}， ] 函数更新数据{ var表=d3。选择“gogo” var tr=表格。选择所有'tr' .数据 var rownenter=tr.enter.append'tr' var td=tr.mergerowenter.selectAlltd span .datad=>d.values .textd=>d td.enter.append'td'。append'span' .textd=>d } 更新数据 裁判 功能参考{ setInterval=>{ data.mapitem=>{

---

对于var i=0；我在第一次运行时没有发现任何更新数据的问题。它工作正常：如果这不是您想要的，请您详细说明一下这个问题好吗？我可以问一下您的d3版本吗？我使用的是最新的d3 v5.1。这个问题与d3版本有关吗？：我的问题。我应该问一下您使用的d3版本。我使用了d3 v3，它工作得很好。无论如何，我会发布v4/v5的解决方案。非常感谢@Shashank，现在我正在尝试在td内部包装一个，但仍然不知道如何做，请给我一个提示？编辑帖子片段，将文本包装在一个范围内。