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);

Answer 1

如果设置CSS规则

，它可以工作

overflow:hidden

包含图表的部分页面。