D3 Graph Problems

My last post on the delays caused by the snow contained a comment about a bug in the D3 library. Not wanting to just leave this, I’ve done some more testing with the latest D3 code. As can be seen from the graph below, something corrupts the x coordinate in the SVG path:



On further inspection, the horizontal lines are caused by the following anomaly in the SVG path element:

<path d=”M890,69.15851272015652………….


Looking at line 4, a large negative number has crept into the X coordinate list, which is giving the horizontal lines.

I’ve verified that the original data is correct, I’m using the v3 release version of D3 and exactly the same thing happens with IE9, Chrome and Firefox. This graph has 486 data values, so it’s not exactly massive.

I’ll post more once I’ve tracked the problem down.

One Reply to “D3 Graph Problems”

  1. OK, this is what’s happening. I’m using “var parseDate = d3.time.format(“%Y-%m-%dT%H:%M:%S.%L”).parse;” to parse the datetimes from the JSON response. Most of these are in the format “2013-01-24T11:33:04.67”, but occasionally this has the milliseconds missing, “2013-01-24T08:15:01”. As the formatter is doing a strict parse this comes back as null.
    As a fix, I just create a second formatter without the milliseconds, detect the null condition and do a second parse. I will try and force the “.0” on the server, but it doesn’t hurt to do the extra check.

Leave a Reply

Your email address will not be published. Required fields are marked *