Cross browser d3.js SVG line rendering date sorting

Question

I designed a simple bar/line graph combination using d3.js:

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

That screenshot is from Firefox. However, when I open the same page with Chrome, it looks like this:

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

And in Safari even worse:

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

I didn't bother to test IE.

Is this a known issue with d3.js? Because weirdly enough I could not find anything on google, so I am hoping there is indeed a mistake in my code.

EDIT:

Following up on meetamit's answer, I could narrow the problem to the sorting of the dates. Here is what it looks like:

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

Order of array in 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

And in 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)

I imagine it's a mistake in your code. If you could post your code that would help us all answer your question. — Alec, Feb 27 '15 at 23:53
Hard to say since you haven't provided the full code nor the SVG output, but looking at the images, it seems like the problem is in the y-values. The x-values appear to be consistent in all the images. Conveniently, the fragments you have posted omit the code that defines your y-scale. Just a guess, but I suspect that's where your problem lies. And no, this is certainly not a problem with D3; your code is to blame. — Stephen Thomas, Feb 28 '15 at 00:55

score 2 · Accepted Answer · edited May 23 '17 at 12:20

I found the solution, thanks to meetamit and this question:

How to sort a javascript array of objects by date

Apparently the d3 date format is not handled well across browsers. Using the native JavaScript Date object solves the issue:

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

Thanks for the help guys!

meetamit · Answer 2 · 2015-02-28T01:24:51.087

It can't be a problem with the rendering, given that the circles and path points are positioned consistently with each other. So it's got to be a data issue; there's something off with kontoData. More specifically, it's got to be a sorting thing, since all the line's x values correspond to bar positions (just the wrong ones).

Your post doesn't show how you prepare the data, so can't help you any further. Look for problems related to sorting. It has to be something that's browser-sensitive. Two things that comes to mind are Dates and object keys. By "Dates", I mean that maybe the different browsers are parsing the date differently. By "object keys" I mean that maybe something in your code iterates over the keys of an object (using a for..in loop) and assumes that the keys will appear in a consistent order, which would be an incorrect assumption.

Cross browser d3.js SVG line rendering date sorting

2 Answers2