CODEWITHSUNDEEP
javascriptjsond3.js
Best Jeanist
Best Jeanist

Reputation: 1129

Loading D3 from a local variable

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.

enter image description here

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;

Upvotes: 0

Views: 2067

Answers (2)

Marbo
Marbo

Reputation: 96

'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...
});

Upvotes: 1

Lex
Lex

Reputation: 5014

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.

enter image description here

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)

Upvotes: 1

Related Questions