Load json data into D3 nodes dynamically

Question

I'm a javascript / d3 newbie. I am trying to parse json data from my servlet to my javascript page - and then use the d3 forcelayout design ( http://bl.ocks.org/mbostock/950642 ).

I am able to read a json file which is placed in my project (highlighted in asterix' below). However I want the user to be able to press a button to update the network (from data read in java) and load data directly from my data variable. So initially no network will be displayed when the page is loaded.

Note: I receive a response in my retrievedjson() function and document.getElementById("demo").innerHTML pastes my formatted json onto the page. However, I'm unable to load my data variable into both .nodes and .links. Could someone enlighten me on how to do this please? A snippet of the json displayed on the webpage is shown at the bottom of the post.

Please see the relevant HTML code below.

var xmlhttp = new XMLHttpRequest();
var data = "no data";

function loadjson(){
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            retrievedjson(xmlhttp.responseText);
        }
    }
    xmlhttp.open("Get", "/nodenetwork/DemoServlet", true);
    xmlhttp.send();
}


function retrievedjson(response) {
    alert("got response");
    var json = JSON.parse(response);
    data = response;
    document.getElementById("demo").innerHTML = data;
}

var width = 960,
    height = 500

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var force = d3.layout.force()
    .nodes(data.nodes)
    .links(data.links)
    .gravity(.05)
    .distance(100)
    .charge(-100)
    .size([width, height]);

    *** This works fine when not commented out ** <!--
    d3.json("json/data.json", function(error, json) {
  force
      .nodes(json.nodes)
      .links(json.links)
      .start();
   -->

  var link = svg.selectAll(".link")
      .data(json.links)
    .enter().append("line")
      .attr("class", "link");

  var node = svg.selectAll(".node")
      .data(json.nodes)
    .enter().append("g")
      .attr("class", "node")
      .call(force.drag);

  node.append("image")
      .attr("xlink:href", "https://github.com/favicon.ico")
      .attr("x", -8)
      .attr("y", -8)
      .attr("width", 16)
      .attr("height", 16);

  node.append("text")
      .attr("dx", 12)
      .attr("dy", ".35em")
      .text(function(d) { return d.sourceName });

  force.on("tick", function() {
    link.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
  });
});

JSON snippet:

{"nodes":[{"sourceName":"Citrix","targets":[]},{"sourceName":"Neon","targets":[]},{"sourceName":"Unknown","targets":[]},{"sourceName":"Clayton","targets":[{"targetSystem":"Citrix","interfaceData":"Frequent 3.4","teams":"H"}]}],
"links":[{"source": 1,"target": 0, "value": 1},{"source": 2,"target": 0, "value": 1},{"source": 2,"target": 1, "value": 1}]}

Thanks :)

Answer 1

 var xmlhttp = new XMLHttpRequest(); var data = "no data"; function loadjson(){ xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { retrievedjson(xmlhttp.responseText); } } xmlhttp.open("Get", "/nodenetwork/DemoServlet", true); xmlhttp.send(); } function retrievedjson(response) { alert("got response"); var json = JSON.parse(response); data = response; document.getElementById("demo").innerHTML = data; } var width = 960, height = 500 var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var data = {"nodes":[{"sourceName":"Citrix","targets":[]},{"sourceName":"Neon","targets":[]},{"sourceName":"Unknown","targets":[]},{"sourceName":"Clayton","targets":[{"targetSystem":"Citrix","interfaceData":"Frequent 3.4","teams":"H"}]}], "links":[{"source": 1,"target": 0, "value": 1},{"source": 2,"target": 0, "value": 1},{"source": 2,"target": 1, "value": 1}]}; var force = d3.layout.force() .nodes(data.nodes) .links(data.links) .gravity(.05) .distance(100) .charge(-100) .size([width, height]); json = data; //d3.json("json/data.json", function(error, json) { force .nodes(json.nodes) .links(json.links) .start(); var link = svg.selectAll(".link") .data(json.links) .enter().append("line") .attr("class", "link"); var node = svg.selectAll(".node") .data(json.nodes) .enter().append("g") .attr("class", "node") .call(force.drag); node.append("image") .attr("xlink:href", "https://github.com/favicon.ico") .attr("x", -8) .attr("y", -8) .attr("width", 16) .attr("height", 16); node.append("text") .attr("dx", 12) .attr("dy", ".35em") .text(function(d) { return d.sourceName }); force.on("tick", function() { link.attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; }); node.attr("transform", function(d) { return "translate(" + dx + "," + dy + ")"; }); }); //}); 

 .link { stroke: #ccc; } .node text { pointer-events: none; font: 10px sans-serif; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 

 var force = d3.layout.force()
    .nodes(data.nodes)
    .links(data.links)
    .gravity(.05)
    .distance(100)
    .charge(-100)
    .size([width, height]);

force.nodes(json.nodes)
      .links(json.links)
      .start();

  var link = svg.selectAll(".link")
      .data(json.links)
    .enter().append("line")
      .attr("class", "link");

  var node = svg.selectAll(".node")
      .data(json.nodes)
    .enter().append("g")
      .attr("class", "node")
      .call(force.drag);

  node.append("image")
      .attr("xlink:href", "https://github.com/favicon.ico")
      .attr("x", -8)
      .attr("y", -8)
      .attr("width", 16)
      .attr("height", 16);

  node.append("text")
      .attr("dx", 12)
      .attr("dy", ".35em")
      .text(function(d) { return d.sourceName });

  force.on("tick", function() {
    link.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
  });

Keep above code in a function passing data(response) as parameter to this function, I think this could work for you... If not, ask for more.