javascript - d3.mouse 在 Firefox 中的像素偏移

Question

我在时间轴上可视化了一些数据。在 mousemove 上，我想显示一条线和当前悬停时间。它在 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. 以固定尺寸为中心，无需翻译。

祝你好运!