SVG multiple elements transition issue

<!DOCTYPE html>
<head>
  <style>
    .chart {
  margin-left: 42px;
}

.chart rect {
  fill: steelblue;
  stroke: white;
}

.chart text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: end;
}

.graph-svg-component {
    background-color: darkslategray;
}
  </style>
</head>
<body>
    <div class="content">
    </div>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script>
      var t = 1297110663,
    v = 70,
    data = d3.range(1).map(next);

function next() {

return {
    time: ++t,
    color: (Math.random(1)*100>50),
    value: v = ~~Math.max(10, Math.min(90, v + 10 * (Math.random() - .5)))
  };
}
var h = 1000;
var y = d3.scale.linear()
    .domain([0, 100])
    .rangeRound([0, h]);

setInterval(function() {
  data.shift();
  data.push(next());
 redraw3();

}, 1500);

var chart3 = d3.select(".content")
  .append("svg:svg")
    .attr("class", "chart")
    .attr("width", 400)
    .attr("height", h).attr("class", "graph-svg-component");

redraw3();

function redraw3() {

var rect = chart3.selectAll("g")
      .data(data, function(d) { return d.time; })
      .enter()
      .append("g");

rect.append("svg:rect", "line")
      .attr("x", 0)
      .attr("y", 0)
      .style("fill",function(d){
          if(d.color) {return "steelblue"} else{ return "blue"}
      })
      .attr("width", 400)
  .attr("height", 30);
    
  rect.append("text")
  .attr("x",0)
  .attr("y",20)
  .text("bla")
   .attr("font-family", "sans-serif")
.attr("font-size", "20px")
            .attr("fill", "red");

chart3.selectAll("g").transition().duration(2000).attr("transform", "translate(0,300)").remove();
    
//chart3.selectAll("g").data(data, function(d) { return d.time;}).exit().remove()

}
    </script>
    <body>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js