Json 在D3中动态加载文件
我试图用d3可视化一个社交网络图。我使用的是强制布局方法。 我想做的是允许用户在图中选择一个节点，并基于所选节点运行一个python脚本，该脚本更改其他节点的属性。我想动态地反映图形上的变化。 对于第一部分，我使用php运行python文件并创建一个新的json文件，其中包含更新的节点属性。但我不知道如何动态加载此文件，保持布局不变并反映更改。任何帮助都将不胜感激Json 在D3中动态加载文件,json,d3.js,data-visualization,networkx,Json,D3.js,Data Visualization,Networkx,我试图用d3可视化一个社交网络图。我使用的是强制布局方法。 我想做的是允许用户在图中选择一个节点，并基于所选节点运行一个python脚本，该脚本更改其他节点的属性。我想动态地反映图形上的变化。 对于第一部分，我使用php运行python文件并创建一个新的json文件，其中包含更新的节点属性。但我不知道如何动态加载此文件，保持布局不变并反映更改。任何帮助都将不胜感激 <!DOCTYPE html> <meta charset="utf-8"> <style>
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="button">
<input name="RumourSource" type="button" value="Source" onclick="SelectSource()" />
<input name="InfoFlow" type="button" value="Info" onclick="UpdateData()" />
</div>
<script>
var width = 1500,
height = 1500;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var link;
var node;
d3.json("data.json", function (graph) {
force
.nodes(graph.nodes)
.links(graph.links)
.friction(0.5)
.start();
link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function(d) {
if (d.group == 1){
return "red"
}
else{
return "blue"
}
})
.on("mouseover", function(){d3.select(this).style("fill", "magenta");})
.on("mouseout", function(){d3.select(this).style("fill", "blue");})
.on("click", function(d){
console.log(d.name);
$.get("run_rumour_source.php", {sourceNode:d.name}, function(data,status){console.log("Data: "+ data + "\nStatus: " + status);}
);
d3.select(this)
.transition()
.delay(1000)
.duration(1000)
.style("fill", "magenta");
updateData(node)
<!-- .call(force.drag); -->
})
node.append("title")
.text(function(d) { return d.name; });
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("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
}
);
function updateData(node){
force.stop();
d3.selectAll(".node").remove();
d3.selectAll(".link").remove();
var filename = "data1.json"
var node1;
var link1;
d3.json(filename, function(g){
force
.nodes(g.nodes)
.links(g.links);
console.log(g.nodes)
node1 = svg.selectAll(".node")
.data(g.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.transition()
.duration(1000)
.style("fill", function(d) {
if (d.group == 1){
return "red"
}
else{
return "blue"
}
}
);
link1 = svg.selectAll(".link")
.data(g.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
}
);
force.on("tick", function() {
link1.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; });
node1.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
force.start();
}
</script>
.节点{
冲程：#fff；
笔划宽度：1.5px；
}
.链接{
行程：#999；
笔画不透明度：.6；
}
可变宽度=1500，
高度=1500；
var color=d3.scale.category20（）；
var-force=d3.layout.force（）
。收费（-120）
.linkDistance（30）
.尺寸（[宽度、高度]）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var-link；
var节点；
d3.json（“data.json”，函数（图形）{
力
.nodes（图.nodes）
.links（graph.links）
.摩擦力（0.5）
.start（）；
link=svg.selectAll（“.link”）
.数据（图表.链接）
.enter（）.append（“行”）
.attr（“类”、“链接”）
.style（“笔划宽度”，函数（d）{return Math.sqrt（d.value）；}）；
node=svg.selectAll（“.node”）
.数据（图.节点）
.enter（）.append（“圆”）
.attr（“类”、“节点”）
.attr（“r”，5）
.style（“填充”，函数（d）{
如果（d.group==1）{
返回“红色”
}
否则{
返回“蓝色”
}
})
.on（“mouseover”，function（）{d3.select（this）.style（“fill”，“magenta”）；}）
.on（“mouseout”，function（）{d3.select（this）.style（“fill”，“blue”）；}）
.打开（“单击”，功能（d）{
console.log（d.name）；
$.get（“run_rum_source.php”，{sourceNode:d.name}，函数（数据，状态）{console.log（“数据：+data+”\n状态：+status）；}
);
d3.选择（本）
.transition（）
.延迟（1000）
.持续时间（1000）
.样式（“填充”、“洋红色”）；
更新数据（节点）
})
node.append（“标题”）
.text（函数（d）{返回d.name；}）；
force.on（“勾号”，函数（）{
attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）；
});
}
);
函数updateData（节点）{
force.stop（）；
d3.选择全部（“.node”）.remove（）；
d3.选择全部（“.link”）.remove（）；
var filename=“data1.json”
var节点1；
var-link1；
json（文件名，函数（g）{
力
.节点（g.节点）
.links（g.links）；
console.log（g.nodes）
node1=svg.selectAll（“.node”）
.数据（g.节点）
.enter（）.append（“圆”）
.attr（“类”、“节点”）
.attr（“r”，5）
.transition（）
.持续时间（1000）
.style（“填充”，函数（d）{
如果（d.group==1）{
返回“红色”
}
否则{
返回“蓝色”
}
}
);
link1=svg.selectAll（“.link”）
.数据（g.links）
.enter（）.append（“行”）
.attr（“类”、“链接”）
.style（“笔划宽度”，函数（d）{return Math.sqrt（d.value）；}）；
}
);
force.on（“勾号”，函数（）{
attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）；
});
force.start（）；
}
d3.jsondata（）