D3 / SVG：如何通过修改范围来调整带有时间刻度的d3.svg。轴的大小？

Question

我一定想念一些明显的东西。 经过一天令人沮丧的头撞之后转向SO ;-)：

鉴于我已经使用d3.time.scale和d3.svg.axis创建了时域轴，以后如何通过更改范围来修改轴的大小？ （保留域，但实际上会更改结果轴的大小）

我已经阅读并遵循了许多不同的示例，但是它们要么不使用时间标度，要么仅更改域。 我得到的最接近的是http://bl.ocks.org/d3noob/7030f35b72de721622b8 ，但是我似乎无法从该示例中获得成功。

我在http://codepen.io/anon/pen/MaZJYM上有一个Codepen该代码有点有趣，因为我从ES6类中的代码中切出了很多零碎，但它确实显示了问题：按按钮。 当我更改范围并重新运行坐标轴调用中的内容时，什么都没有发生（除了奇怪的文本锚点更改？？）。

Answer 1

您的更新功能应如下所示：

function updateAxes() {
    timeScale.range( [30, 500 ] );//give a slight x

d3.select( '.axis.month' )
        .call( monthAxis )
        .selectAll( ".tick text" )
        .style( "text-anchor", "start" )
        .attr( "x", 2 )
        .attr( "y", 3 );
    d3.select( '.axis.date' )//your code its .axis.day which is wrong
    .call( dayAxis ).selectAll( ".tick text" )
        .style( "text-anchor", "middle" )
        .classed( "date", true )

}

注意：您必须将样式设置为更新中的轴，否则它将像小提琴一样跳到其他刻度上。

这里的工作示例

希望这可以帮助