Question

如何使用d3.js重新加载div创建？

我在js文件中有这个功能

$(document).ready(function(){
  calculateStatic();

  setInterval(function(){
    calculateStatic();
  }, 5000);

});

函数调用每5秒钟但div不会改变，我创建div的代码就是那样

  function calculateStatic(){
    var json_url = "....";
      var dataset_text = [ 
          {"sSUSP" : "number of suspended slots", 
          "sRSV" : "number of reserved slots",
          "users" : "number of active users",
          "jPEND" : "number of pending jobs",
          "queues" : "number of active queues",
          "sRUN" : "number of running slots",
          "jRUN" : "number of running jobs",
          "ts": "Current time",
          "sNJOBS" : "total number of active slots"}
       ];
    var final_data = [];

    d3.json(json_url, function(data) {
       $.each(data, function(key, value){
        if (key in dataset_text[0]){
          name = dataset_text[0][key]
          final_data.push({name, value});
        }
       });
       d3.select("#resume_data").selectAll("div")
        .data(final_data)
        .enter()
        .append("div")
        .attr("class", "item_table")
        .text(function(d){ return d.name + " : " + d.value})
    });
  }

知道如何更改此div？

Answer 1

分析您的代码，我们可以看到final_data长度永远不会变大。因此，这就是问题所在：绑定数据时：

d3.select("#resume_data").selectAll("div")
    .data(final_data)
    .enter()
    .append("div")

您创建＆＃34;输入＆＃34;选择。但是，当您再次调用该函数时，因为<div>中已经有#resume_data，并且您的绑定数据永远不会增加，您的＆＃34;输入＆＃34;选择始终为空，并且不会附加任何内容。

正确的解决方案是，如@Pavel said in the comments，创建一个适当的＆＃34;更新＆＃34;选择。

懒人解决方案：

这是一个懒惰的解决方案，我个人根本不喜欢：在添加新的div之前删除所有以前的div：

d3.select("#resume_data").selectAll("div").remove();//removing old divs

d3.select("#resume_data").selectAll("div")
    .data(final_data)
    .enter()
    .append("div")
    .attr("class", "item_table")
    .text(function(d){ return d.name + " : " + d.value});

如何使用d3.js库重新加载div

1 个答案: