D3/SVG:如何通过修改范围来调整带有时间刻度的D3.SVG.axis的大小

D3/SVG: How to resize a d3.svg.axis with time scale by modifying range?

本文关键字：SVG D3 时间刻度 axis 何通过 范围 修改 调整      更新时间：2023-09-26

我一定遗漏了一些明显的东西。在经历了一天沮丧的头巾之后转向SO；-）：

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

我读过并遵循了许多不同的例子，但它们要么不使用时间尺度，要么只是改变了领域。我最接近的是http://bl.ocks.org/d3noob/7030f35b72de721622b8，但我似乎无法使该示例中的模式发挥作用。

我在http://codepen.io/anon/pen/MaZJYM这个代码有点有趣，因为我已经从ES6类中的代码中截取了一些片段，但它准确地显示了问题：按下按钮。当我像链接示例中那样更改范围并重新运行轴调用时，不会发生任何事情（除了奇怪的文本锚点更改？？）。

您的更新功能应该是这样的：

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

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

此处的工作示例

希望这能帮助

相关文章：