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

Question

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

http://i.imgur.com/9AiA460.jpg

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

http://i.imgur.com/EtmChZP.jpg

在 Safari 中更糟：

http://i.imgur.com/E5fL4Ks.jpg

我懒得去测试IE了。

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

编辑：

根据 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'));

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)

Answer 1

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

您的 post 没有显示您是如何准备数据的，因此无法进一步帮助您。查找与排序相关的问题。它必须是浏览器敏感的东西。想到的两件事是日期和对象键。 "Dates"，我的意思是可能不同的浏览器解析日期的方式不同。 "object keys" 我的意思是您的代码中的某些内容可能会遍历对象的键（使用 for..in 循环）并假设键将以一致的顺序出现，这是一个不正确的假设。

Answer 2

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

How to sort a javascript array of objects by date

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

感谢大家的帮助！

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

Cross browser d3.js SVG line rendering date sorting

javascript

css

svg

d3.js