跨浏览器d3.js SVG线条渲染日期排序

Cross browser d3.js SVG line rendering date sorting

本文关键字：日期 排序 浏览器 d3 js SVG      更新时间：2023-09-26

我使用d3.js:设计了一个简单的条形图/折线图组合

https://i.stack.imgur.com/coJI9.jpg

这张截图来自Firefox。然而，当我用Chrome打开同一个页面时，它看起来是这样的：

https://i.stack.imgur.com/L7H2o.jpg

在Safari中更糟糕：

https://i.stack.imgur.com/KTks5.jpg

我没有费心去测试IE.

这是d3.js的已知问题吗？因为奇怪的是，我在谷歌上找不到任何东西，所以我希望我的代码中确实有错误。

编辑：

根据米塔米特的回答，我可以把问题缩小到日期的排序上。以下是它的样子：

// sort on key values
function keysrt(key, desc) {
    return function (a, b) {
        return desc ? ~~(a[key] < b[key]) : ~~(a[key] > b[key]);
    };
}
[...]
var parseDate = d3.time.format("%Y-%m-%d").parse;
allDates = JSON.parse(allDates);
data = JSON.parse(data);
data.forEach(function (d, i) {
    d.Datum = parseDate(d.Datum);
});
allDates.forEach(function (d, i) {
    d.Datum = parseDate(d.Datum);
});
allDates.sort(keysrt('Datum'));
data.sort(keysrt('Datum'));

Chrome中的数组顺序：

Sat Jul 20 2013 00:00:00 GMT+0200 (Mitteleuropäische Sommerzeit)
einAusVis.js:57 
Sat Jan 05 2013 00:00:00 GMT+0100 (Mitteleuropäische Zeit)
einAusVis.js:57 
Sat Sep 15 2012 00:00:00 GMT+0200 (Mitteleuropäische Sommerzeit)
einAusVis.js:57 
Sat Aug 18 2012 00:00:00 GMT+0200 (Mitteleuropäische Sommerzeit)
einAusVis.js:57 
Sat Oct 13 2012 00:00:00 GMT+0200 (Mitteleuropäische Sommerzeit)
einAusVis.js:57 
Sat Dec 08 2012 00:00:00 GMT+0100 (Mitteleuropäische Zeit)
einAusVis.js:57 
Sat Oct 15 2011 00:00:00 GMT+0200 (Mitteleuropäische Sommerzeit)
einAusVis.js:57

在Firefox中：

 Date {Sat Sep 17 2011 00:00:00 GMT+0200}
einAusVis.js (Zeile 57)
Date {Sat Oct 15 2011 00:00:00 GMT+0200}
einAusVis.js (Zeile 57)
Date {Sat Dec 10 2011 00:00:00 GMT+0100}
einAusVis.js (Zeile 57)
Date {Sat Jan 07 2012 00:00:00 GMT+0100}
einAusVis.js (Zeile 57)
Date {Sat Feb 04 2012 00:00:00 GMT+0100}
einAusVis.js (Zeile 57)
Date {Sat Mar 03 2012 00:00:00 GMT+0100}
einAusVis.js (Zeile 57)
Date {Sat Mar 31 2012 00:00:00 GMT+0200}
einAusVis.js (Zeile 57)

多亏了meetamit和这个问题，我找到了解决方案：

如何按日期对javascript对象数组进行排序

显然，d3日期格式不能很好地跨浏览器处理。使用本机JavaScriptDate对象解决了问题：

allDates.sort(function(a,b) { return new Date(a.Datum).getTime() - new Date(b.Datum).getTime() } );
data.sort(function(a,b) { return new Date(a.Datum).getTime() - new Date(b.Datum).getTime() } );

谢谢你们的帮助！

考虑到圆和路径点的位置一致，渲染不会有问题。所以这一定是一个数据问题；kontoData有问题。更具体地说，这必须是一件排序的事情，因为行的所有x值都对应于条形图的位置（只是错误的位置）。

你的帖子没有显示你是如何准备数据的，所以对你没有任何帮助。查找与排序相关的问题。它必须是对浏览器敏感的东西。脑海中浮现的两件事是日期和对象键。我所说的"日期"是指不同的浏览器对日期的解析可能不同。所谓"对象键"，我的意思是，代码中的某些内容可能会迭代对象的键（使用for..in循环），并假设键将以一致的顺序出现，这将是一个错误的假设。

相关文章：