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 )

}

注意：您必須將樣式設置為更新中的軸，否則它將像小提琴一樣跳到其他刻度上。

這里的工作示例

希望這可以幫助