d3.mouse中的像素偏移量

Question

我在时间轴上可视化一些数据。在移动鼠标时，我想显示一条线和当前的悬停时间。它在Chrome和Safari中按预期工作，但在Firefox中（在44和45中测试）有一个偏移：返回的像素值总是缺少整个SVG宽度的一半。

例如，当悬停在可视化的左侧时，我希望d3.mouse的值等于0，但它是-300。

在Codepen上查看此测试用例：http://codepen.io/ro-ka/pen/bpqazK?editors=0010有问题的函数位于底部。

有什么想法吗？

Answer 1

这是因为transform：translate（）CSS函数，如果你禁用它，它可以很好地工作。也许有另一个CSS属性来解决这个2D变换。

思路：

1. 您可以将<svg>元素包装到包含这些完美中心样式的DIV中，并将其从svg对象中删除。
2. 使用固定的测量中心而不进行翻译。
祝你好运！