d3.js - C3js 時系列フロー

Question

利用可能な例に基づいて、更新時に時系列を流れる複数の線を持つ折れ線グラフを作成しようとしています。

チャートの作成:

// The number of columns is variable
var columns = [];
columns.push(['time', time]);
for (var i = 0; i < values.length; i++) {
  // The number of columns is variable
  columns.push([values[i].name, pairValue(values[i])]);
}

var chart = c3.generate({
  bindto: selection,
  data: {
    x: 'time',
      columns: columns
    },
    axis: {
      x: {
        type: 'timeseries',
        tick: {
          format: '%X'
        }
      }
    }
  });

チャートの更新:

// The number of columns is variable
var columns = [];
columns.push(['time', time]);
for (var i = 0; i < values.length; i++) {
  // pairValue extracts value from object
  columns.push([values[i].name, pairValue(values[i])]);
}

// I have saved the chart object on creation
var chart = __charts[tag(selection)]; 
chart.flow({
  columns: columns,
  to: time,
  duration: 1000
});

作成は正常に機能しますが、更新は X ティックを移動せず、更新は表示可能領域の外側で行われます。どんな提案でも大歓迎です。