Javascript 跨浏览器d3.js SVG行渲染日期排序

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

该屏幕截图来自Firefox。但是，当我用Chrome打开同一个页面时，它看起来是这样的：

更糟糕的是，在狩猎中：

我没有费心去测试IE

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

编辑：

根据meetamit的回答，我可以把问题缩小到日期的排序上。下面是它的外观：

// 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'));

在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)

---

考虑到圆和路径点彼此的位置一致，渲染不会有问题。所以这一定是一个数据问题；

kontoData

有问题。更具体地说，它必须是一个排序的东西，因为所有行的x值都对应于条的位置（只是错误的位置）

---

您的帖子没有显示您如何准备数据，因此无法进一步帮助您。查找与排序相关的问题。它必须对浏览器敏感。我想到的两件事是日期和对象键。所谓“日期”，我的意思是，可能不同的浏览器对日期的解析方式不同。所谓“对象键”，我的意思是，代码中的某些内容可能会在对象的键上迭代（使用

for..in

循环），并假设键将以一致的顺序出现，这是一个错误的假设。

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

显然，d3日期格式在不同浏览器中处理得不好。使用本机JavaScript日期对象解决了以下问题：

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() } );

---

谢谢你们的帮助

我想这是你代码中的一个错误。如果你能发布你的代码，这将帮助我们回答你的问题。很难说，因为你没有提供完整的代码或SVG输出，但看看图片，问题似乎出在y值上。所有图像中的x值似乎一致。方便的是，您发布的片段省略了定义y比例的代码。只是猜测，但我怀疑这就是你的问题所在。不，这肯定不是D3的问题；应该怪你的代码。很抱歉。我添加了完整的代码。

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() } );