javascript - d3.js Axis コンポーネントが目に見えないティックを保持する (メモリ リークの原因)

Question

スライド時系列を作成しようとしています。これはダッシュボード ウィジェットで使用され、直前の何かを追跡します。

X 軸コンポーネントにすぎません。この機能をテストするだけです。

コードは次のとおりです。

 var now = parseInt(Date.now() / 1000) * 1000;// rounded to second
 var t = 60;
 data = d3.range(60).map(init); // init last minute

 function init() {
     t = t - 1;
     return {
         time: now - t * 1000,
         value: 0
     };
 }

 setInterval(function () {
     data.shift();
     data.push({
         time: parseInt(Date.now() / 1000) * 1000,
         value: Math.random() * 200
     });
     redraw();
 }, 1000);

 var margin = { top: 20, right: 20, bottom: 50, left: 50 };
 var width = 800 - margin.left - margin.right;
 var height = 300 - margin.top - margin.bottom;

 var x = d3.time.scale()
  .domain([now - 60 * 1000, now])
  .range([0, width]);

 var xAxis = d3.svg.axis().scale(x)
 .orient("bottom").ticks(d3.time.second, 5);

 var svg = d3.select("body").append("svg")
     .attr("class", "chart")
     .attr("width", width + margin.left + margin.right)
     .attr("height", height + margin.top + margin.bottom)
     .append("g")
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 svg.selectAll("rect")
     .data(data);

 //xaxis
 var axis = svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + height + ")")
                    .call(xAxis);

 function redraw() {

     now = parseInt(Date.now() / 1000) * 1000;
     x.domain([now - 60 * 1000, now]);

     axis.transition()
     .duration(1000)
     .ease("linear")
 .call(xAxis);
 }

完璧ではない場合でも、非常にうまく機能しますが、ダッシュボード コンポーネントに関連するメモリの問題が発生する可能性があります。

一部の目盛りは、表示されなくなった場合でも、svg に保持されます。数分後、追加のグループ/ティックが表示されます。

フィドルはこちらから入手できます。

私のコードで何が間違っていますか? 私は何かを誤解しましたか？

ありがとう、