将json数据动态加载到D3节点中

Question

我是javascript/d3新手。我试图从我的servlet解析json数据到我的javascript页面 - 然后使用d3 forcelayout设计（http://bl.ocks.org/mbostock/950642）。

我能看懂这是摆在我的项目一个JSON文件（高亮显示星号”下面）。但是我希望用户能够按下按钮来更新网络（从用java读取的数据）并直接从我的数据变量加载数据。所以最初在加载页面时不会显示网络。

注：我收到我的retrievedjson响应（）函数的document.getElementById（“演示”）的innerHTML贴我的格式化JSON到页面上。但是，我无法将我的数据变量加载到.nodes和.links中。有人能告诉我如何做到这一点吗？网页上显示的json片段显示在帖子的底部。

请参阅下面的相关HTML代码。

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片段：

{"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}]} 

谢谢:)

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(" + d.x + "," + d.y + ")"; }); 
 
    }); 
 
//});

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

保持上述功能通过数据代码（响应）作为这个功能的参数，我认为这可以为你工作... 如果没有，要求更多。