Question

我一直在努力解决在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不会渲染第一次更新（数据），如果注释掉ref（）函数，d3只是不会将新数据附加到html中。

Answer 1

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

为了克服d3 v3中的可用性问题，引入了新的选择类int a; int b; int counter = 0; do { Console.WriteLine("Enter number"); a = int.Parse(Console.ReadLine()); Console.WriteLine("Enter number"); b = int.Parse(Console.ReadLine()); counter++; // - Not sure how to set up counter to count a and b together // when user enter a and b it counts as 1 not 2? if (a % 3 == 0 || b%3==0) { Console.WriteLine("Counter is reseting"); counter = 0; } } while (a % 5 != 0 && b % 5 != 0); Console.WriteLine( counter);。

马克的话：

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

您可以在此处详细了解：d3 CHANGES#selection

另外，我遇到了这个我想分享的博客：https://medium.com/@mbostock/what-makes-software-good-943557f8a488

在您的示例中，使用相同的merge逻辑，这里是代码段：

＆＃13;

merge

＆＃13;

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)

  var rowenter = tr.enter().append('tr')

  var td = tr.merge(rowenter).selectAll("td span")
    .data(d=>d.values )
    .text(d=>d)

  td.enter().append('td').append('span')
    .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)
}

＆＃13;

希望这会有所帮助。

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

1 个答案: