d3.json cannot parse an 'Infinity' value

Question

I'm trying to read sqlite db data and provide it as json data to d3 to build a graph. I can easily read this data in json format, for example this URL

http://localhost:8085/SQLQuery/?date1=2019-03-01%2000:00:00&date2=2019-03-31%2023:59:59&radio=0013a200410a4bc1

Returns this data:

[
   ["2019-03-13 08:59:42.445199", 20.0, -93150.3125, -1128635.625],
   ["2019-03-13 09:00:18.670074", 21.0, -116238.2734375, -Infinity],
   ["2019-03-13 09:00:54.897829", 21.0, -111895.09375, -1916368.5],
   ["2019-03-13 09:01:31.063545", 21.0, -116290.6484375, -1332886.0],
   ["2019-03-13 09:02:07.244134", 21.0, -99264.3828125, -Infinity],
   ["2019-03-13 09:02:43.424961", 21.0, -109359.6953125, -1090349.25],
   ["2019-03-13 09:03:19.621574", 21.0, -114976.4375, -3437984.0],
   ["2019-03-13 09:03:55.800267", 21.0, -97664.5078125, -1667308.5],
   ["2019-03-13 09:04:31.995798", 21.0, -102451.046875, -Infinity],
   ["2019-03-13 09:05:08.172229", 21.0, -109326.34375, -3360548.75],
   ["2019-03-13 09:05:44.367397", 21.0, -110630.9140625, -732758.8125],
   ["2019-03-13 09:06:20.576101", 21.0, -110025.140625, -926976.3125],
   ["2019-03-13 09:06:56.771144", 21.0, -116129.8984375, -Infinity]
]

Now when using d3.json function to read the same data I've problems with 'Infinity' values:

jsondata = d3.json("http://localhost:8085/SQLQuery/?date1=" + date1 + "&date2=" + date2 + "&radio=" + wradio);

gives error:

SyntaxError: JSON.parse: unexpected non-digit at line 1 column 122 of the JSON data

Column 122 corresponds to first 'Infinity' value in json data.

Is there any option to allow the parsing of 'Infinity' values ? Do I need to ensure that these values never arrive to database and are converted to valid numbers ?

Answer 1

According to this answer (your question is not a duplicate, though) your best option is producing the correct JSON, which you can pass to d3.json.

However, if that's not an option, you can use d3.text to fetch the invalid JSON, like this (assuming you're using D3 v5):

d3.text("data.json").then(function(textData){
    //...
};

And then, inside d3.text (or the then method in v5), you can replace the -Infinity for a corresponding string, before using JSON.parse():

textData = textData.replace(/-Infinity/g, '"-Infinity"');
const data = JSON.parse(textData);

Also, following the advice in the same linked answer, you can restore the original -Infinity, replacing the string by using the reviver function in the JSON.parse():

textData = textData.replace(/-Infinity/g, '"-Infinity"');
const data = JSON.parse(textData, function(key, value){
    return value === "-Infinity" ? -Infinity : value;
});

Since I cannot use a real JSON in the stack snippet, here is a blockbuilder, using a JSON like yours:

[
    ["2019-03-13 08:59:42.445199", 20.0, -93150.3125, -1128635.625],
    ["2019-03-13 09:00:18.670074", 21.0, -116238.2734375, -Infinity],
    ["2019-03-13 09:00:54.897829", 21.0, -111895.09375, -1916368.5]
]

Have a look at the console: https://blockbuilder.org/GerardoFurtado/e853f11e0604a929f82fcd62a33f925e