Javascript d3缩放/平移行为以毫秒间隔更改

我在一个有问题的领域工作，我需要以毫秒的时间间隔显示数据。我发现，当你在图形上放大足够远时，缩放/平移功能的行为会突然改变！如果使用的是时间刻度，则当轴开始显示毫秒时，就会发生这种情况

具体来说，行为改变是d3如何围绕鼠标光标缩放。对于以秒或更高为单位测量的间隔，网格线将相对于光标位置缩放。i、 将鼠标移动到下午6点以上并滚动将导致下午6点占用更多空间。但一旦达到毫秒，网格似乎会从最左边开始缩放，而不管光标位置如何。平移也会完全停止轴的移动

我对d3不是很有经验，但对我来说，这看起来像一个bug。我在zoom文档中看不到与此相关的内容。它这样做有什么原因吗？如果有，是否可以以某种方式覆盖它

在下面的链接中，只要将x轴标签从：YY变为.YY（即：50到.653），您就会看到问题所在

这显示了“断开”的行为：

这显示了“正确”的行为：

编辑：我发现问题不在于缩放行为，而在于time.scale（）本身。我做了另一个小提琴，它使用setTimeout自动重新缩放轴，而不使用缩放。这个问题仍然存在。在这里试试

var margin={top:20，right:20，bottom:30，left:40}，
宽度=600-边距。左侧-边距。右侧，
高度=400-margin.top-margin.bottom；
var x=d3.time.scale（）
.domain（[-50005000]）
.范围（[0，宽度]）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
svg.append（“rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var gXAxis=svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
功能图（选择）{
选择。每个功能（数据）{
var xAxis=d3.svg.axis（）
.比例（x）
.orient（“底部”）
.滴答声（5）
.尺寸（-高度）；
调用（xAxis）；
});
}
更新（）；
函数更新（）{
var start=新日期（x.domain（）[0].getTime（）+10）；
var end=新日期（x.domain（）[1].getTime（）-10）；
if（start.getTime（）

缩放和平移的行为与预期一样，但每次都以不同的值绘制记号/网格线，这使得它在开始时看起来不稳定，在极端缩放时，看起来网格没有移动

我已经修改了你的提琴，使用了更完整的刻度格式功能，并且每次都在同一点（刻度上）上画一个圆：

如您所见，值按预期缩放和平移，但刻度值始终在窗口上的相同点处隔开，而不是以毫秒为整数

错误很简单，时间刻度的“nice”round datetime值的定义在这个刻度上不一致。明确地告诉刻度为

.nice（）

也不起作用

时间尺度方法试图找到一个合适的时间单位来选择节拍，但当整个域小于1秒时，这种方法不起作用。理想的情况是，如果它切换到“尼斯”的线性尺度定义（即，四舍五入到10的幂的倍数）

即，如果您这样做：

x = d3.time.scale()
    .domain([10, 477])
    .nice();

然后查询x域并将值转换回整数，仍然可以得到[10477]。如果使用线性比例进行此操作，域将四舍五入到[0500]。类似地，该时间刻度的刻度值放置在域的精确分数处，但对于线性刻度，则放置在整数处

---

您可以在github上发出此问题请求。同时，如果您的data domain在毫秒范围内，可以使用线性刻度。

在我看来也是一个bug。事实上，我在几个小时前提出了一个github问题，mbostock已经承诺对3.4.xAwesome版本进行修复。很高兴这是一个相当简单的解决方案。

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(5)
    .tickSize(-height)
    .tickFormat(d3.time.format("%H:%M.%L") );

x = d3.time.scale()
    .domain([10, 477])
    .nice();