D3 js上の動的ノード追加/更新ボタンをクリックしたときのネットワークグラフ

Question

ボタンクリックでノードとリンクを追加しようとしました.Jsonファイルをロードしません。 Create Nodes/Links on document ready

$(document).ready(function(){ 
 
var w = $("#graph").innerWidth(); 
 
var h = $("#graph").innerHeight(); 
 

 
var default_node_color = "#ccc"; 
 
var default_link_color = "red"; 
 
var nominal_base_node_size = 8; 
 
var nominal_text_size = 10; 
 
var max_text_size = 24; 
 
var nominal_stroke = 1.5; 
 
var highlight_stroke_width = 4; 
 
var max_stroke = 4.5; 
 
var min_zoom = 0.1; 
 
var max_zoom = 7; 
 
var svg = d3.select("#graph").append("svg"); 
 
var zoom = d3.behavior.zoom().scaleExtent([min_zoom,max_zoom]) 
 
var g = svg.append("g"); 
 
svg.style("cursor","move"); 
 

 
var dnodes = []; 
 
var dlinks = []; 
 

 

 
function findNode(id) { 
 
\t for (var i in dnodes) { 
 
\t \t if (dnodes[i]["id"] === id) return dnodes[i]; 
 
\t \t }; 
 
\t }; 
 

 
function addNode(id,name) { 
 
\t \t var newNode = findNode(id); 
 
\t \t if(newNode == undefined) 
 
\t \t { 
 
\t \t \t dnodes.push({"id":id,"name":name}); 
 
\t \t \t //update(dnodes,dlinks); 
 
\t \t } 
 
\t \t 
 
     }; 
 
\t \t 
 
function addLink(sourceId, targetId) { 
 
     var sourceNode = findNode(sourceId); 
 
     var targetNode = findNode(targetId); 
 
\t \t if((sourceNode !== undefined) && (targetNode !== undefined)) { 
 
      dlinks.push({"source": sourceNode, "target": targetNode}); 
 
\t \t \t //update(dnodes,dlinks); 
 
      }   
 
     }; 
 
\t 
 

 
addNode("1","2XYZ"); 
 
addNode("3","3XYZ"); 
 
addNode("4","4XYZ"); 
 
addNode("5","5XYZ"); 
 

 
addLink("1","2"); 
 
addLink("1","3"); 
 
addLink("1","4"); 
 
addLink("1","5"); 
 
\t 
 
var force = d3.layout.force() 
 
    .linkDistance(160) 
 
    .charge(-300) 
 
    .friction(0.5) 
 
    .size([w,h]); 
 
    
 
var nodes = force.nodes(dnodes); 
 
var links = force.links(dlinks); 
 
    force.start(); 
 
//function update(dnodes, dlinks) \t 
 
//{ 
 
function isConnected(sourceNodeid, destNodeid) 
 
\t { 
 
\t 
 
\t \t for(var i in dlinks) 
 
\t \t { 
 
\t \t \t if((dlinks[i].source.id == sourceNodeid && dlinks[i].target.id==destNodeid)||((dlinks[i].source.id == destNodeid && dlinks[i].target.id==sourceNodeid))) 
 
\t \t \t { 
 
\t \t \t \t return true; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t } 
 
\t \t if(sourceNodeid == destNodeid) 
 
\t \t { 
 
\t \t return true; 
 
\t \t } 
 
\t \t return false; 
 
\t }; \t 
 
\t \t 
 
    
 
    
 

 
function dragstart(d, i) { 
 
\t force.stop() // stops the force auto positioning before you start dragging 
 
\t } 
 
function dragmove(d, i) { 
 
\t d.px += d3.event.dx; 
 
\t d.py += d3.event.dy; 
 
\t d.x += d3.event.dx; 
 
\t d.y += d3.event.dy; 
 
\t tick(); 
 
\t } 
 

 
function dragend(d, i) { 
 
\t d.fixed = true; 
 
\t tick(); 
 
\t } 
 
var node_drag = d3.behavior.drag() 
 
     .on("dragstart", dragstart) 
 
     .on("drag", dragmove) 
 
     .on("dragend", dragend); 
 

 
var link = g.selectAll(".link") 
 
    .data(dlinks) 
 
    .enter().append("line") 
 
    .attr("class", "link") 
 
\t .style("stroke-width",nominal_stroke) 
 
\t .style("stroke", default_link_color) 
 
\t 
 
    var node = g.selectAll(".node") 
 
    .data(dnodes) 
 
    .enter().append("g") 
 
    .attr("class", "node") 
 
\t .call(node_drag); 
 
\t \t 
 
    var circle = node.append("rect") 
 
\t \t \t \t \t .attr("x", "-15px") 
 
\t \t \t \t \t .attr("y", "-15px") 
 
\t \t \t \t \t .attr("rx", "4") 
 
\t \t \t \t \t .attr("ry", "4") 
 
        .attr("width", "30px") 
 
\t \t \t \t \t .attr("height", "30px") 
 
        .attr("id", function (d) {return d.id;}) 
 
        .attr("fill", "#336699"); 
 
\t \t \t \t \t 
 
var text = g.selectAll(".text") 
 
\t \t \t \t .data(dnodes) 
 
\t \t \t \t .enter().append("text") 
 
\t \t \t \t .attr("dy", ".35em") 
 
\t \t \t \t .attr("y","22") 
 
\t \t \t \t .style("font-size", nominal_text_size + "px") 
 
\t \t \t \t text.text(function(d) { return d.name; }) 
 
\t \t \t \t .style("text-anchor", "middle"); 
 
\t \t \t \t 
 
\t \t \t 
 
    zoom.on("zoom", function() { 
 
    var stroke = nominal_stroke; 
 
    if (nominal_stroke*zoom.scale()>max_stroke) stroke = max_stroke/zoom.scale(); 
 
    link.style("stroke-width",stroke); 
 
    circle.style("stroke-width",stroke); 
 
\t 
 
\t var text_size = nominal_text_size; 
 
    if (nominal_text_size*zoom.scale()>max_text_size) text_size = max_text_size/zoom.scale(); 
 
    text.style("font-size",text_size + "px"); 
 
\t g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); 
 
\t }); 
 
    svg.call(zoom); \t 
 
    resize(); 
 
    force.on("tick", tick); 
 
    
 
    function tick() 
 
    { 
 
    node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 
 
    text.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 
 
    
 
    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; }); 
 
\t 
 
\t //node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); \t 
 
    node.attr("cx", function(d) { return d.x; }) 
 
     .attr("cy", function(d) { return d.y; }); 
 
\t 
 
    } 
 
    
 

 
    
 
    function resize() { 
 
    var width = $("#graph").innerWidth(); 
 
\t 
 
\t var height = $("#graph").innerHeight(); 
 
\t svg.attr("width", width).attr("height", height); 
 
    
 
\t force.size([force.size()[0]+(width-w)/zoom.scale(),force.size()[1]+(height-h)/zoom.scale()]).resume(); 
 
    w = width; 
 
\t h = height; 
 
\t } 
 
//} 
 
});

text { 
 
    font-family: sans-serif; 
 
    pointer-events: none; 
 
} 
 
html,body { width:100%; height:100%; margin:none; padding:none; } 
 
#graph { width:100%;height:100%; margin:auto; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.10/d3.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<body> 
 
<div id="graph"></div> 
 
</body>

ここでは私がをやろうとしている何次のとおりです：By Update function

$(document).ready(function(){ 
 
var w = $("#graph").innerWidth(); 
 
var h = $("#graph").innerHeight(); 
 

 
var default_node_color = "#ccc"; 
 
var default_link_color = "red"; 
 
var nominal_base_node_size = 8; 
 
var nominal_text_size = 10; 
 
var max_text_size = 24; 
 
var nominal_stroke = 1.5; 
 
var highlight_stroke_width = 4; 
 
var max_stroke = 4.5; 
 
var min_zoom = 0.1; 
 
var max_zoom = 7; 
 
var svg = d3.select("#graph").append("svg"); 
 
var zoom = d3.behavior.zoom().scaleExtent([min_zoom,max_zoom]) 
 
var g = svg.append("g"); 
 
svg.style("cursor","move"); 
 

 
var dnodes = []; 
 
var dlinks = []; 
 

 

 
function findNode(id) { 
 
\t for (var i in dnodes) { 
 
\t \t if (dnodes[i]["id"] === id) return dnodes[i]; 
 
\t \t } 
 
\t } 
 

 
function addNode(id,name) { 
 
\t \t var newNode = findNode(id); 
 
\t \t if(newNode == undefined) 
 
\t \t { 
 
\t \t \t dnodes.push({"id":id,"name":name}); 
 
\t \t \t update(dnodes,dlinks); 
 
\t \t } 
 
\t \t 
 
     } 
 
\t \t 
 
function addLink(sourceId, targetId) { 
 
     var sourceNode = findNode(sourceId); 
 
     var targetNode = findNode(targetId); 
 
\t \t if((sourceNode !== undefined) && (targetNode !== undefined)) { 
 
      dlinks.push({"source": sourceNode, "target": targetNode}); 
 
\t \t \t update(dnodes,dlinks); 
 
      }   
 
     } 
 
\t 
 

 
    $("#btnadd").click(function(){ 
 
    addNode("1","2XYZ"); 
 
    addNode("3","3XYZ"); 
 
    addNode("4","4XYZ"); 
 
    addNode("5","5XYZ"); 
 
    addLink("1","2"); 
 
    addLink("1","3"); 
 
    addLink("1","4"); 
 
    addLink("1","5"); 
 
    }); 
 

 

 
\t 
 
var force = d3.layout.force() 
 
    .linkDistance(160) 
 
    .charge(-300) 
 
    .friction(0.5) 
 
    .size([w,h]); 
 
    
 
var nodes = force.nodes(dnodes); 
 
var links = force.links(dlinks); 
 

 
force.start(); 
 

 
function update(dnodes, dlinks) \t 
 
{ 
 
function isConnected(sourceNodeid, destNodeid) 
 
\t { 
 
\t 
 
\t \t for(var i in dlinks) 
 
\t \t { 
 
\t \t \t if((dlinks[i].source.id == sourceNodeid && dlinks[i].target.id==destNodeid)||((dlinks[i].source.id == destNodeid && dlinks[i].target.id==sourceNodeid))) 
 
\t \t \t { 
 
\t \t \t \t return true; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t } 
 
\t \t if(sourceNodeid == destNodeid) 
 
\t \t { 
 
\t \t return true; 
 
\t \t } 
 
\t \t return false; 
 
\t } 
 
\t \t 
 
    
 
    
 

 
function dragstart(d, i) { 
 
\t force.stop(); 
 
\t } 
 
function dragmove(d, i) { 
 
\t d.px += d3.event.dx; 
 
\t d.py += d3.event.dy; 
 
\t d.x += d3.event.dx; 
 
\t d.y += d3.event.dy; 
 
\t tick(); 
 
\t } 
 

 
function dragend(d, i) { 
 
\t d.fixed = true; 
 
\t tick(); 
 
\t } 
 
var node_drag = d3.behavior.drag() 
 
     .on("dragstart", dragstart) 
 
     .on("drag", dragmove) 
 
     .on("dragend", dragend); 
 

 
var link = g.selectAll(".link") 
 
    .data(dlinks) 
 
    .enter().append("line") 
 
    .attr("class", "link") 
 
\t .style("stroke-width",nominal_stroke) 
 
\t .style("stroke", default_link_color); 
 
\t 
 
    var node = g.selectAll(".node") 
 
    .data(dnodes) 
 
    .enter().append("g") 
 
    .attr("class", "node") 
 
\t .call(node_drag); 
 
\t \t 
 
    var circle = node.append("rect") 
 
\t \t \t \t \t .attr("x", "-15px") 
 
\t \t \t \t \t .attr("y", "-15px") 
 
\t \t \t \t \t .attr("rx", "4") 
 
\t \t \t \t \t .attr("ry", "4") 
 
        .attr("width", "30px") 
 
\t \t \t \t \t .attr("height", "30px") 
 
        .attr("id", function (d) {return d.id;}) 
 
        .attr("fill", "#336699"); 
 
\t \t \t \t \t 
 
var text = g.selectAll(".text") 
 
\t \t \t \t .data(dnodes) 
 
\t \t \t \t .enter().append("text") 
 
\t \t \t \t .attr("dy", ".35em") 
 
\t \t \t \t .attr("y","22") 
 
\t \t \t \t .style("font-size", nominal_text_size + "px") 
 
\t \t \t \t text.text(function(d) { return d.name; }) 
 
\t \t \t \t .style("text-anchor", "middle"); 
 
\t \t \t \t 
 
\t \t \t 
 
    zoom.on("zoom", function() { 
 
    var stroke = nominal_stroke; 
 
    if (nominal_stroke*zoom.scale()>max_stroke) stroke = max_stroke/zoom.scale(); 
 
    link.style("stroke-width",stroke); 
 
    circle.style("stroke-width",stroke); 
 
\t 
 
\t var text_size = nominal_text_size; 
 
    if (nominal_text_size*zoom.scale()>max_text_size) text_size = max_text_size/zoom.scale(); 
 
    text.style("font-size",text_size + "px"); 
 
\t g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); 
 
\t }); 
 
    svg.call(zoom); \t 
 
    resize(); 
 
    force.on("tick", tick); 
 
    
 
    function tick() 
 
    { 
 
    node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 
 
    text.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 
 
    
 
    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; }); 
 
\t 
 
\t //node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); \t 
 
    node.attr("cx", function(d) { return d.x; }) 
 
     .attr("cy", function(d) { return d.y; }); 
 
\t 
 
    } 
 
    
 

 
    
 
    function resize() { 
 
    var width = $("#graph").innerWidth(); 
 
\t 
 
\t var height = $("#graph").innerHeight(); 
 
\t svg.attr("width", width).attr("height", height); 
 
    
 
\t force.size([force.size()[0]+(width-w)/zoom.scale(),force.size()[1]+(height-h)/zoom.scale()]).resume(); 
 
    w = width; 
 
\t h = height; 
 
\t } 
 
} 
 
});

text { 
 
    font-family: sans-serif; 
 
    pointer-events: none; 
 
} 
 
html,body { width:100%; height:100%; margin:none; padding:none; } 
 
#graph { width:100%;height:100%; margin:auto; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.10/d3.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<body> 
 
    <button id="btnadd">Add</button> 
 
    <div id="graph"></div> 
 
</body>

ここ

は私がをやったです

第1リンクコードが正常に動作しています。第2リンクコードが正しく動作していません。 第2リンクコード私はupdate()ボタンをクリックしてノードを追加する関数によってグラフを更新しています。

addNode()addLink()私はボタンをクリックして電話したいと思う。次のようなもの：

$("#btnadd").click(function(){ 
addNode("1","2XYZ"); 
addNode("3","3XYZ"); 
addLink("1","2"); 
}); 

私はどこが間違っているのか分かりません。

ありがとうございます！

Answer 1

各ノードの挿入後に更新プログラムを呼び出しています。

if(newNode == undefined) 
     { 
      dnodes.push({"id":id,"name":name}); 
      update(dnodes,dlinks);//don't do this 
     } 

代わりに、ボタン内のすべてのノードとリンクを次のようにクリックします（下にコメントします）。

$("#btnadd").click(function() { 
    addNode("1", "2XYZ"); 
    addNode("3", "3XYZ"); 
    addNode("4", "4XYZ"); 
    addNode("5", "5XYZ"); 

    addLink("1", "2"); 
    addLink("1", "3"); 
    addLink("1", "4"); 
    addLink("1", "5"); 
    update(dnodes, dlinks);//call your update function 
    force.start();//you forgot to start the force layout. 
}); 

作業コードhere