Javascript d3从csv更新数据时setInterval上闪烁的文本

我是d3新手，学习很多。我在更新我的数据时有点问题，我是从csv文件获得的

我使用setInterval（）每秒更新一次数据。 当它再次删除和插入数据时，它会闪烁几毫秒（表消失并生成一个新表）。 我做错了什么？我怎样才能消除闪烁

谢谢你的帮助！：-）

这是我的代码：

<script type="text/javascript">
  d3.text("data.csv", function(data) {
    var parsedCSV = d3.csv.parseRows(data);

    var container = d3.select("body")
      .append("table")

    .selectAll("tr")
      .data(parsedCSV).enter()
      .append("tr")

    .selectAll("td")
      .data(function(d) { return d; }).enter()
      .append("td")
      .text(function(d) { return d; });

  });    

  var inter = setInterval(function() {
    updateData();
  }, 1000);    

  function updateData() {
    d3.text("data.csv", function(data) {
      var parsedCSV = d3.csv.parseRows(data);

      var container = d3.select("body")
        .append("table")

      .selectAll("tr")
        .data(parsedCSV).enter()
        .append("tr")

      .selectAll("td")
        .data(function(d) { return d; }).enter()
        .append("td")
        .text(function(d) { return d; });    
    });

    d3.select("body").selectAll("tr")
      .remove()    
  }
</script>

d3.文本（“data.csv”，函数（数据）{
var parsedCSV=d3.csv.parseRows（数据）；
变量容器=d3。选择（“主体”）
.append（“表格”）
.selectAll（“tr”）
.data（parsedCSV）.enter（）
.附加（“tr”）
.selectAll（“td”）
.data（函数（d）{return d；}）.enter（）
.附加（“td”）
.text（函数（d）{return d；}）；
});    
var inter=setInterval（函数（）{
更新数据（）；
}, 1000);    
函数updateData（）{
d3.文本（“data.csv”，函数（数据）{
var parsedCSV=d3.csv.parseRows（数据）；
变量容器=d3。选择（“主体”）
.append（“表格”）
.selectAll（“tr”）
.data（parsedCSV）.enter（）
.附加（“tr”）
.selectAll（“td”）
.data（函数（d）{return d；}）.enter（）
.附加（“td”）
.text（函数（d）{return d}；
});
d3.选择（“主体”）。选择全部（“tr”）
.删除（）
}

添加transition（）以进入/退出/删除调用将解决闪烁问题

var circleData=[50,40,30,60,70]；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，500）
.attr（“高度”，5000）
var circle=svg.append（“circle”）
.attr（“cx”，100）
.attr（“cy”，100）
.attr（“r”，25）；
setTimeout（函数（）{
更新循环（循环数据）
}, 2500)
函数updateCircles（数据）{
var circles=svg.selectAll（“圆”）
.数据（圈数据）；
圈。输入（）
.附加（“圆圈”）
.attr（“cx”，100）
.attr（“cy”，函数（d，i）{
回报率（i+1）*100
})
.attr（“r”，0）
.attr（“填充”，“黄色”）
.transition（）
.持续时间（1500）
.attr（“r”，函数（d）{
返回d；
});
圆。过渡（）
.持续时间（1500）
.延迟（1500）
.style（'填充'，'绿色'）
.attr（'r'，函数（d）{
返回d；
});
圈。退出（）
.transition（）.持续时间（1500）.延迟（1500）
.样式（“填充”、“红色”）
.transition（）.持续时间（1500）.延迟（3000）
.attr（“r”，0）.transition（）.remove（）；
}

添加transition（）以进入/退出/删除调用将解决闪烁问题

var circleData=[50,40,30,60,70]；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，500）
.attr（“高度”，5000）
var circle=svg.append（“circle”）
.attr（“cx”，100）
.attr（“cy”，100）
.attr（“r”，25）；
setTimeout（函数（）{
更新循环（循环数据）
}, 2500)
函数updateCircles（数据）{
var circles=svg.selectAll（“圆”）
.数据（圈数据）；
圈。输入（）
.附加（“圆圈”）
.attr（“cx”，100）
.attr（“cy”，函数（d，i）{
回报率（i+1）*100
})
.attr（“r”，0）
.attr（“填充”，“黄色”）
.transition（）
.持续时间（1500）
.attr（“r”，函数（d）{
返回d；
});
圆。过渡（）
.持续时间（1500）
.延迟（1500）
.style（'填充'，'绿色'）
.attr（'r'，函数（d）{
返回d；
});
圈。退出（）
.transition（）.持续时间（1500）.延迟（1500）
.样式（“填充”、“红色”）
.transition（）.持续时间（1500）.延迟（3000）
.attr（“r”，0）.transition（）.remove（）；
}

---

<代码>hm不完全工作。它应该替换数据，而不是转换到下一个：D，但无论如何，谢谢你的回答。你的问题没有说“数据没有更新”。问题涉及闪烁效应。请更新问题properlyData is updatet，但是在删除和获取新数据之间有一个短暂的闪烁如果闪烁是您的问题，那么我的答案有什么问题？我的回答说明了如何缓和添加/删除之间的过渡。为什么会被否决？我已经尝试了transition（）方法，但不知怎么的，它对我的代码不起作用。如果我添加到.remove（）的转换和到.enter（）的转换，数据将不再更新。附言：我的声誉太低了，所以不能贬低你的答案，其他人更是以更高的声誉贬低了它。不管怎样，谢谢。嗯，不太管用。它应该替换数据，而不是转换到下一个：D，但无论如何，谢谢你的回答。你的问题没有说“数据没有更新”。问题涉及闪烁效应。请更新问题properlyData is updatet，但是在删除和获取新数据之间有一个短暂的闪烁如果闪烁是您的问题，那么我的答案有什么问题？我的回答说明了如何缓和添加/删除之间的过渡。为什么会被否决？我已经尝试了transition（）方法，但不知怎么的，它对我的代码不起作用。如果我添加到.remove（）的转换和到.enter（）的转换，数据将不再更新。附言：我的声誉太低了，所以不能贬低你的答案，其他人更是以更高的声誉贬低了它。无论如何，谢谢你。