Question

我在这里工作的d3.js热图应用程序上收到错误：

y[i] = y[i-1] + np.array([x_prime(t[i], x_0, w), -w**2 * x(t[i], x_0, w)]) * h

它在桌面设备（imac）中的谷歌浏览器和歌剧中运作良好，我以我期望的方式看到热图活动，但当我检查任何其他浏览器时Firefox和移动设备（Safari，Chrome）中的网络浏览器，我得到了意想不到的结果。

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

一位朋友帮我解决了问题，他在firefox上发现了一个问题，我宣布数据点映射到一个变量，并且他得到了一个完整的无效日期数组：数组[无效日期，无效日期，......]。

我在Firefox上测试了这个，我没有看到这个特殊问题。但是，我尝试了他的测试建议，通过使用Date.parse（）的手动实现来解决问题，但无济于事。

我在控制台上的Firefox上也发现了这个错误：

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

此时，我不确定它是来自我在x3轴上的d3域设置，还是我为x轴返回的数据点I＆I ＃39;在热图中绘图。 HALP！

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的调试后，我发现我的朋友提到的无效日期数组并通过在从此链接（What is the best way to detect a mobile device in jQuery?）取得的移动设备中运行时添加条件if语句来纠正这种情况：

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

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

2 个答案: