title: D3 Horizontal Bar Chart Animation Continously
body: <p>I am trying to have the animation continuously for a bar chart. i am using the following as reference...</p>
  
  <p><a href="https://stackoverflow.com/questions/38983807/how-to-animate-a-horizontal-d3-bar-chart#">How to animate a horizontal D3 bar chart?</a></p>
  
  <p>I see the animation coming up for every 3 secs, but the bar shows incorrect data every alternate. Not able to figure the reasons.</p>
  
  <p>My code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;style&gt;
  
      body {
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
          width: 960px;
          height: 500px;
          position: relative;
      }
  
      svg {
          width: 100%;
          height: 100%;
          position: center;
      }
  
      .toolTip {
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
          position: absolute;
          display: none;
          width: auto;
          height: auto;
          background: none repeat scroll 0 0 white;
          border: 0 none;
          border-radius: 8px 8px 8px 8px;
          box-shadow: -3px 3px 15px #888888;
          color: black;
          font: 12px sans-serif;
          padding: 5px;
          text-align: center;
      }
  
      text {
          font: 10px sans-serif;
          color: white;
      }
      &lt;!-- text.value { --&gt;
          font-size: 120%;
          fill: white;
      }
  
      .axisHorizontal path{
          fill: none;
      }
  
      .axisHorizontal .tick line {
          stroke-width: 1;
          stroke: rgba(0, 0, 0, 0.2);
      }
  
      .bar {
          fill: steelblue;
          fill-opacity: .9;
      }
  
  &lt;/style&gt;
  &lt;body&gt;
  
  &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  
      data = [
          {label:"Category 1", value:19},
          {label:"Category 2", value:5},
          {label:"Category 3", value:13},
          {label:"Category 4", value:17},
          {label:"Category 5", value:19},
          {label:"Category 6", value:27}
      ];
  
  
      var div = d3.select("body").append("div").attr("class", "toolTip");
  
      var axisMargin = 20,
              margin = 40,
              valueMargin = 4,
              width = parseInt(d3.select('body').style('width'), 10),
              height = parseInt(d3.select('body').style('height'), 10),
              barHeight = (height-axisMargin-margin*2)* 0.4/data.length,
              barPadding = (height-axisMargin-margin*2)*0.6/data.length,
              data, bar, svg, scale, xAxis, labelWidth = 0;
  
      max = d3.max(data, function(d) { return d.value; });
  
  
      svg = d3.select('body')
              .append("svg")
              .attr("width", width)
              .attr("height", height);
  
  
      bar = svg.selectAll("g")
  
              //.exit()
              .data(data)
              .enter()
              .append("g")
              ;
  
      bar.attr("class", "bar")
              .attr("cx",0)
              .attr("transform", function(d, i) {
                  return "translate(" + margin + "," + (i * (barHeight + barPadding) + barPadding) + ")";
              });
  
      bar.append("text")
              .attr("class", "label")
              .attr("y", barHeight / 2)
              .attr("dy", ".35em") //vertical align middle
              .text(function(d){
                  return d.label;
              }).each(function() {
          labelWidth = Math.ceil(Math.max(labelWidth, this.getBBox().width));
      });
  
      scale = d3.scale.linear()
              .domain([0, max])
              .range([0, width - margin*2 - labelWidth]);
  
      xAxis = d3.svg.axis()
              .scale(scale)
              .tickSize(-height + 2*margin + axisMargin)
              .orient("bottom");
  
  
      bar.append("rect")
  
          .attr("transform", "translate("+labelWidth+", 0)")
          .attr("height", barHeight)
          .attr("width", 0)//this is the initial value
          .transition()
          .duration(1500)//time in ms
          //.delay(function(d,i){ if(d.label == 'Category 6'){return 0}else{return i*350}})//a different delay for each bar
          .attr("width", function(d){return scale(d.value);})
  
          ;
          //now, the final value
      function repeat() {
  
      var rect = bar.selectAll("rect")
                  .remove()
                  .data(data, function(d) { return d.value; })
                  .enter()
                  .append("rect")
                  .attr("transform", "translate("+labelWidth+", 0)")
                  .attr("height", barHeight)
                  .attr("width", 0)//this is the initial value
                  ;
  
          rect.transition()
              .duration(1500)
              .attr("width",0)
              //.delay(function(d,i){ if(d.label == 'Category 6'){return 0}else{return i*350}})//a different delay for each bar
              .attr("width", function(d){return scale(d.value);});
  
          //rect.exit().transition()
              //.duration(1500)
              //.attr("width", function(d){return scale(d.value);})
              //.remove();
  
          rect.exit().remove();
      }
  setInterval(function(){repeat();},3000);
  
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>