Nagiosを使用して監視しているネットワーク上のホストとサービスの現在の状態を表す動的な力有向グラフを作成するために、PHPバックエンド(yiiフレームワークに基づく)でd3.jsとjqueryを使用しています。
グラフは、ルート -> ホストグループ -> ホスト -> サービスを示しています。次の形式で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 = 緑、警告 = 黄色など) が含まれます。リンクには、ノードのソース オブジェクト ID とターゲット オブジェクト ID があります。新しいホストが監視システムに追加または削除されると、ノードとリンクが変更される場合があります
最初のSVGをセットアップし、次に10秒ごとにセットアップする次のコードがあります
- 現在の JSON オブジェクトを取得します
- リンクのマップを作成します
- 現在のノードとリンクを選択し、それらを JSON データにバインドします
- 入るリンクが追加され、出るリンクが削除されます
- 更新および追加されたノードは塗りつぶしの色が変わり、名前が追加されたツールチップが表示されます
強制開始
$.ajaxSetup({ キャッシュ: false }); 幅 = 960、高さ = 500; ノード = []; リンク = []; force = d3.layout.force() .charge(-1000) .linkDistance(1) .size([幅, 高さ]);
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);
出力の例は、ネットワークの視覚化で見ることができます
上記のすべては正しく動作しますが、コードがループするたびに視覚化が再起動し、ノードが安定するまですべて跳ね返ります。私が必要としているのは、現在のアイテムをそのままにしておくことですが、新しいノードとリンクはビジュアライゼーションに追加され、クリックおよびドラッグ可能などです。
誰かが助けてくれれば、私は永遠に感謝します.