從CSV更新數據時，setInterval上的d3閃爍文本

Question

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

Answer 1

添加transition（）進入/退出/刪除呼叫將解決您的閃爍問題。

 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>