移动浏览器和桌面 Firefox 浏览器上的 D3.js 热图问题

Question

我在这里工作的 d3.js 热图应用程序出现错误：

https://codepen.io/qwirkyrabbit/pen/XqmPgo

它在桌面设备 (imac) 中的 google chrome 和 opera 上运行良好，我看到热图活动的方式与我期望的一样，但是当我在任何其他浏览器（如 Firefox）和网络浏览器中检查时在移动设备（Safari、Chrome）中，我得到了意想不到的结果。

x 轴未显示刻度或刻度标签，热图的数据点仅限于 y 轴的最左侧部分（在其他年份跨度内未显示任何内容）。此外，它也不会在移动设备的 codepen 个人资料页面上显示预览。

一个朋友帮我解决了这个问题，他在 Firefox 上发现了一个问题，我声明数据点映射到一个变量，他得到一个充满无效日期的数组：数组 [无效日期，无效日期，...]。

我在 Firefox 上对此进行了测试，但没有发现这个特殊问题。但是，我尝试了他的测试建议，通过使用 Date.parse() 的手动实现来解决问题，但无济于事。

我还在控制台上的 Firefox 上注意到了这个错误：

[15:09:45.168] Unexpected value NaN parsing x attribute. @ https://d3js.org/d3.v3.js:670

此时，我不确定它是来自我在 d3 域上的 x 轴设置，还是来自我在热图中绘制的 x 轴返回的数据点。哈！

Answer 1

Firefox 不喜欢你要求它解析日期的方式。

只需更改此的所有实例：

new Date(Date.parse(d['month'] + '-01-' + d['year'])));

到这里：

new Date(Date.parse(d['month'] + ' 01 ' + d['year'])));

删除- 应该会为您解决问题。

有关可接受的参数格式，请参阅 MDN Date.parse() 规范。

Answer 2

我能够找到解决移动设备问题的方法。在我打开 iphone 的调试后，我发现了我朋友提到的无效日期数组，并通过在移动设备上运行时添加条件 if 语句来纠正这种情况，取自此链接 (What is the best way to detect a mobile device in jQuery?)：

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 return x(Date.UTC(d['year'], d['year'], 1))
}
else {
 return x(new Date(d['month'] + ' 01 ' + d['year']))
}

事实证明，为移动设备解析日期需要在将其设置为日期对象时进行一些更改。这目前帮助我在移动设备上获得正确的行为 - Date.UTC(): http://objjob.phrogz.net/js/method/777