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

保持上述功能通過數據代碼（響應）作爲這個功能的參數，我認爲這可以爲你工作... 如果沒有，要求更多。