javascript - x 軸の遷移によりオーバーフローが発生する

Question

まず第一に、いいえ: この質問は、(まだ) 行の醜い移行に関するものではありません (そのために別のものを開くかもしれませんが..) 。

データを折れ線グラフで表示しており、ユーザーは期間を選択できます。次に、x 軸は、変更された時間範囲に適合するように対応して遷移します。添付の画像では、たとえば、対象期間が 1 週間だったのを 4 週間に切り替えました。それに応じて、x 軸の目盛りの数が 7 から 28 に増加します。

質問: x 軸のアニメーションが svg コンテナーの外に表示されないようにするにはどうすればよいですか? ご覧のとおり、追加の日付は左から飛んでいき、コンテナーのはるか外側でアニメーション化されています。

何か案は？

現在、移行はおそらく最も単純な方法で機能します。

// format for x-axis
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(d3.time.format("%d.%m"))
    .ticks(d3.time.days, 1) 
    .tickSubdivide(0);

// Update x-axis
svg.select(".x")         
    .transition()
    .duration(500)
    .call(xAxis);