Loading D3 from a local variable

Question

Hi i have this variable myJSON that i want to use in my d3 force graph this is the output of the variable. i was wondering if there any way to use a variable to populate my graph.

var myJSON;

$.ajax({
type: "POST",
url: "http://localhost/web/search.php",
async: false,
data: {
    "dataA": string2
},
cache: false,
success: function(data) {
    myJSON = JSON.parse(data);
},
});

By just putting the variable into the graphs code but it keeps giving me this error uncaught exception: [object ProgressEvent] does any one know why isnt this working? any suggestion would be appreciated.

d3.json("myJSON", function(error, graph) { if (error) throw error;

Answer 1

'd3.json' function load data from file or url. To use a local json variable, just make some change.

For example, you have a demo from d3 website, and data in file "data.json" is

{
  "nodes": [
    {"id": "Myriel", "group": 1},
    {"id": "Napoleon", "group": 1},
    {"id": "Mlle.Baptistine", "group": 1}
   ],
    "links": [
      {"source": "Napoleon", "target": "Myriel", "value": 1}
    ]
}

the demo is something like this

d3.json("data.json", function(error, data){
    if(error) throw error;
    console.log(data);

    //some code...
});

It means load data from a file called "data.json".

Now if you already have json variable data

var data = {
  "nodes": [
    {"id": "Myriel", "group": 1},
    {"id": "Napoleon", "group": 1},
    {"id": "Mlle.Baptistine", "group": 1}
   ],
    "links": [
      {"source": "Napoleon", "target": "Myriel", "value": 1}
    ]
};

just use it, change the code to:

console.log(data);
//some code...

Suggestion:

You can load data from url, just like what the comment says. Use AJAX to load data from url, and parse it to d3 code can be done with only d3. d3 will get the data from url.

d3.json("http://localhost/web/search.php", function(error, data){
    if(error) throw error;
    console.log(data);

    //some code...
});

Answer 2

So as mentioned in the comments. D3 will handle the AJAX for you. If you load the example and look at the network tab in chrome. You can see miserables.json is being loaded in.

This code is actually creating an AJAX GET request for you.

d3.json("miserables.json", function(error, graph) {
  if (error) throw error;
  ...

You can try d3.json("http://localhost/web/search.php?dataA=string2", ... Or optionally load it yourself. And replace graph.nodes with your JSON.

.selectAll("circle")
    .data(graph.nodes)