从CSV更新数据时，d3上setInterval上的文本闪烁 [英] d3 flickering Text on setInterval when update data from csv

问题描述

我是d3的新手，正在学习.我从csv文件中获取数据时遇到了一些更新问题.

I am new at d3 and learning alot. I have a little problem with updating my data, that i'm getting from a csv file.

我使用setInterval()每秒更新一次数据. 当它删除并再次插入数据时，它会闪烁几毫秒(表消失了，并生成了一个新表). 我究竟做错了什么?我如何摆脱闪烁?

I use setInterval() to update the data every second. When it removes and Insert the data again, it flickers for some milliseconds (the table goes away and a new table is generated). What am I doing wrong? How can i get rid of the flicker?

感谢您的帮助！ :-)

Thanks for Helping! :-)

这是我的代码:

<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>

推荐答案

添加transition()来输入/退出/删除呼叫将解决您的闪烁问题.

Adding transition() to enter/exit/remove calls will resolve your flicker problem.

var circleData = [50, 40, 30, 60, 70];

var svg = d3.select("body").append("svg")
  .attr("width", 500)
  .attr("height", 5000)

var circle = svg.append("circle")
  .attr("cx", 100)
  .attr("cy", 100)
  .attr("r", 25);

setTimeout(function() {
  updateCircles(circleData)
}, 2500)

function updateCircles(data) {

  var circles = svg.selectAll("circle")
    .data(circleData);

  circles.enter()
    .append("circle")
    .attr("cx", 100)
    .attr("cy", function(d, i) {
      return (i + 1) * 100
    })
    .attr("r", 0)
    .attr("fill", 'yellow')
    .transition()
    .duration(1500)
    .attr("r", function(d) {
      return d;
    });

  circles.transition()
    .duration(1500)
    .delay(1500)
    .style('fill', 'green')
    .attr('r', function(d) {
      return d;
    });

  circles.exit()
    .transition().duration(1500).delay(1500)
    .style("fill", "red")
    .transition().duration(1500).delay(3000)
    .attr("r", 0).transition().remove();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

这篇关于从CSV更新数据时，d3上setInterval上的文本闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！