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

【问题标题】：Cross browser d3.js SVG line rendering date sorting跨浏览器 d3.js SVG 线条渲染日期排序
【发布时间】：2015-02-27 23:50:43
【问题描述】：

我使用 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 的一个已知问题吗？因为奇怪的是我在谷歌上找不到任何东西，所以我希望我的代码确实有错误。

编辑：

跟进 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)

【问题讨论】：

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

标签： javascript css svg d3.js

【解决方案1】：

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

How to sort a javascript array of objects by date

显然 d3 日期格式在浏览器中处理得不好。使用原生 JavaScript Date 对象解决了这个问题：

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

感谢大家的帮助！

【讨论】：

【解决方案2】：

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

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

【讨论】：