我正在使用d3.js和jquery与基于yii框架的PHP后端创建一个动态力导向图，以表示我们使用Nagios监视的网络上当前主机和服务的状态。
该图显示根->主机组->主机->服务。我已经创建了一个服务器端函数以返回以下格式的JSON对象
{
"nodes": [
{
"name": "MaaS",
"object_id": 0
},
{
"name": "Convergence",
"object_id": "531",
"colour": "#999900"
},
{
"name": "maas-servers",
"object_id": "719",
"colour": "#999900"
},
{
"name": "hrg-cube",
"object_id": "400",
"colour": "#660033"
}
],
"links": [
{
"source": 0,
"target": "531"
},
{
"source": 0,
"target": "719"
},
{
"source": "719",
"target": "400"
}
]
}
节点包含对象ID用于链接，颜色以显示节点的状态（OK = 绿色，WARNING = 黄色等）。链接具有节点的源对象ID和目标对象ID。随着监控系统中添加或删除新主机，节点和链接可能会发生变化。
我有以下代码，设置初始SVG，然后每10秒执行以下操作：
- 检索当前JSON对象
- 创建链接映射
- 选择当前节点和链接，并将其绑定到JSON数据
- 添加输入链接并移除退出链接
- 更新和添加的节点将更改其填充颜色，并添加具有名称的工具提示
启动力导向图
$.ajaxSetup({ cache: false }); width = 960, height = 500; node = []; link = []; force = d3.layout.force() .charge(-1000) .linkDistance(1) .size([width, height]);
svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g");
setInterval(function(){
$.ajax({
url: "<?php echo $url;?>",
type: "post",
async: false,
datatype: "json",
success: function(json, textStatus, XMLHttpRequest)
{
json = $.parseJSON(json);
var nodeMap = {};
json.nodes.forEach(function(x) { nodeMap[x.object_id] = x; });
json.links = json.links.map(function(x) {
return {
source: nodeMap[x.source],
target: nodeMap[x.target],
};
});
link = svg.selectAll("line")
.data(json.links);
node = svg.selectAll("circle")
.data(json.nodes,function(d){return d.object_id})
link.enter().append("line").attr("stroke-width",1).attr('stroke','#999');
link.exit().remove();
node.enter().append("circle").attr("r",5);
node.exit().remove();
node.attr("fill",function(d){return d.colour});
node.append("title")
.text(function(d) { return d.name; });
node.call(force.drag);
force
.nodes(node.data())
.links(link.data())
.start()
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 = Math.max(5, Math.min(width - 5, d.x)); })
.attr("cy", function(d) { return d.y = Math.max(5, Math.min(height - 5, d.y)); });
});
}
});
},10000);
输出的一个示例可以在网络可视化中看到。
除了每次代码循环时会导致可视化重新启动并且节点都会反弹直到它们稳定之外，上述所有内容都是正确的。我需要的是任何当前项目保持不变，但是任何新节点和链接都将添加到可视化中，并且可以被单击并拖动等等。
如果有人能帮忙，我将不胜感激。
force.on（“tick”，function（））时将这些对象推入.nodes和.links中。 - Joum