D3.js and Universal JS (JavaScript) Considerations for reading and parsing server-side JSON

This demand is actually quite clear, but the online search out of the tutorial is a mess, feel really need to summarize their own.

D3.js is now widely used in data visualization, and with the continued development of big data, the framework is expected to become more prevalent in the future (it is said that its author Mike Bostock began full-time development, previously in charge of the New York Times data visualization engineer, he himself moved from New York to San Francisco ...). ）。 Follow the instructions here: Https://github.com/mbostock/d3/wiki/API-Reference, D3.js actually has an API that specifically reads JSON data, so it's very simple to read the JSON that d3.js the server-side, so here's a sample code:

D3.json ("Http://localhost:8080/XXXX/datasource/HTTP",    function Handle_json_data (data) {        Console.log (data )        Console.log (Data.results[0]);        var series=data.results[0].series;        var contents=series[0];        var values=contents.values        Console.log (values);    });

The following statements are I used in the test process for debugging purposes, because it is not known to JS, so use this method a bit more in-depth understanding. Here are some discussion of the following statements:

According to the various tutorials on the Web, the JSON string taken from the server should first be converted to a JSON object that JS can handle using the Eval function, such as the following blog: http://blog.csdn.net/beyond0851/article/details/ 9285771 and http://www.cnblogs.com/fishtreeyu/archive/2011/11/05/2237190.html, of which the final conclusion of the first blog read I was drunk.

But we see that there is no conversion process in the code above, and we can assume that D3.js has encapsulated the above process. In addition, for some complex JSON structure, how to handle it? The JSON data I've processed in the code above is as follows:

{     "Results": [        {              "series": [                 {                      "name": "HTTP",                      "Columns": [                           "Time",                          "Durationtime"                      ],                      "Values": [                          [                              "2015-06-18t07:31:44.514z" ,                             23137050                         ],                          [                              "2015-06-18t07:31:46z",                              200                         ],                          [                              "2015-06-18t07:31:46.123z",                              300                         ],                         [                               "2015-08-08t18:33:50.61z",                              763                         ],                         [                               "2015-08-08t18:33:51.505z",                              10628                         ],                         [                               "2015-08-08t18:33:53.31z",                              43                         ],                         [                               "2015-08-08t18:34:00.223z",                              285                         ],                         [                               "2015-08-08t18:34:02.184z",                             1491                          ],                         [                               "2015-08-08t18:34:02.295z",                             43                          ],                         [                              " 2015-08-08t18:34:03.839z ",                             36                          ],                         [                              " 2015-08-08t18:34:04.179Z ",                             1174                         ],                          [                              "2015-08-09t06 : 33:51.622z ",                             768                          ],                         [                              "2015-08-09t06:33:52.511z",                              11371                         ],                          [                              "2015-08-09t06 : 33:54.721z ",                              42                         ],                         [                               "2015-08-09t06:33:56.031z",                              98                         ],                         [                               "2015-08-09t06:33:57.969z",                              33                         ],                         [                               "2015-08-09t06:34:03.951z",                              1376                         ]                     ]                 }             ]        }    ]}

You can combine the above code to look at the process, in fact, remember a principle can be: The field name is preceded by curly braces, directly with the "." In the case of a [0],[1] array, the braces or field names are first taken out.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

D3.js and Universal JS (JavaScript) Considerations for reading and parsing server-side JSON