我有一个按预期工作的强制布局图。它从磁盘上的JSON读取图形并显示它。我现在有服务器使用套接字io将数据推送到客户端页面。该数据是包含节点和链接数据的JSON。如何动态更新d3.js强制布局图?
我怎么有力量布局刷新,当它从服务器接收新的JSON更新的布局?
var width = 1900,
height = 1100;
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 networkData = {};
var socket = io.connect('http://localhost:3000');
socket.on("networkData", function (data) {
networkData = data; //This is the data I want to use
});
d3.json("data.json", function(error, graph) { //"data.json" is the data
if (error) throw error; // currently being used
// want to use "networkData"
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", "orange")
.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; });
});
});
编辑
我已经更新了代码奎勒莫·加西亚提示如下:
socket.on("networkData", function (data) {
force.stop()
render(data);
force
.nodes(data.nodes)
.links(data.links)
.start();
});
function render(data) {
var link = svg.selectAll(".link")
.data(data.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.selectAll(".node")
.data(data.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", "orange")
.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; });
});
}
然而,图只适用于从服务器发送的第一networkData
JSON。我还必须手动刷新页面才能显示此数据。
为什么数据不适用于>第二个数据文件?我怎样才能让页面动态更新? (即不必手动刷新)
我已经用您的建议更新了OP,但遇到了更多的问题。 – Shengus
创建一个带有错误的jsfiddle是否太麻烦了?此外,看看这个答案,我认为这是一个类似的情况http://stackoverflow.com/a/18378803/1923565 –
我不认为有可能模仿推送数据从服务器使用jsfiddle。我会研究其他线索的想法。 – Shengus