D3 强制定向图 ajax 更新

我使用 d3.js 和 jquery 以及 PHP 后端（基于 yii 框架）来创建动态力定向图来表示我们使用 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，以及用于显示节点状态的颜色（正常 = 绿色，警告 = 黄色等）。链接具有节点的源对象 ID 和目标对象 ID。随着新主机添加到监控系统或从监控系统中删除，节点和链路可能会发生变化

我有以下代码，它设置初始 SVG，然后每 10 秒设置一次

1. 检索当前 JSON 对象
2. 创建链接地图
3. 选择当前节点和链接并将它们绑定到 JSON 数据
4. 添加输入链接并删除退出链接
5. 更新和添加的节点将更改其填充颜色并具有 添加了他们的名字的工具提示

6. 力量开始了

   $.ajaxSetup({ 缓存: false }); 宽度=960， 高度=500； 节点=[]； 链接=[]； 力 = d3.layout.force() .充电(-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);
   

输出的示例可以在以下位置查看网络可视化 https://picasaweb.google.com/102897394941976373993

上述所有内容都可以正常工作，但每次代码循环时都会导致可视化重新启动并且节点全部弹跳直到稳定下来。我需要的是任何当前项目保持原样，但任何新节点和链接都添加到可视化中并且可单击和可拖动等。

如果有人可以提供帮助，我将永远感激不已。

我已经成功地使用上面所有建议的混合找到了问题的解决方案，下面是我使用的代码

    var width = $(document).width();
    var height = $(document).height();

    var outer = d3.select("#chart")
        .append("svg:svg")
            .attr("width", width)
            .attr("height", height)
            .attr("pointer-events", "all");

    var vis = outer
        .append('svg:g')
            .call(d3.behavior.zoom().on("zoom", rescale))
            .on("dblclick.zoom", null)
        .append('svg:g')

        vis.append('svg:rect')
            .attr('width', width)
            .attr('height', height)
            .attr('fill', 'white');

        var force = d3.layout.force()
            .size([width, height])
            .nodes([]) // initialize with a single node
            .linkDistance(1)
            .charge(-500)
            .on("tick", tick);

        nodes = force.nodes(),
            links = force.links();

        var node = vis.selectAll(".node"),
            link = vis.selectAll(".link");

       redraw();

       setInterval(function(){
           $.ajax({
                url: "<?php echo $url;?>",
                type: "post",
                async: false,
                datatype: "json",
                success: function(json, textStatus, XMLHttpRequest) 
                {
                    var current_nodes = [];
                    var delete_nodes = [];
                    var json = $.parseJSON(json);

                    $.each(json.nodes, function (i,data){

                        result = $.grep(nodes, function(e){ return e.object_id == data.object_id; });
                        if (!result.length)
                        {
                            nodes.push(data);
                        }
                        else
                        {
                            pos = nodes.map(function(e) { return e.object_id; }).indexOf(data.object_id);
                            nodes[pos].colour = data.colour;
                        }
                        current_nodes.push(data.object_id);             
                    });

                    $.each(nodes,function(i,data){
                        if(current_nodes.indexOf(data.object_id) == -1)
                        {
                            delete_nodes.push(data.index);
                        }       
                    });
                    $.each(delete_nodes,function(i,data){
                        nodes.splice(data,1); 
                    });

                    var nodeMap = {};
                    nodes.forEach(function(x) { nodeMap[x.object_id] = x; });
                    links = json.links.map(function(x) {
                        return {
                            source: nodeMap[x.source],
                            target: nodeMap[x.target],
                            colour: x.colour,
                        };
                    });
                    redraw();
                }
            });
       },2000);


       function redraw()
       {
           node = node.data(nodes,function(d){ return d.object_id;});
           node.enter().insert("circle")
                .attr("r", 5)
           node.attr("fill", function(d){return d.colour})
           node.exit().remove();

           link = link.data(links);
           link.enter().append("line")
               .attr("stroke-width",1)
           link.attr('stroke',function(d){return d.colour});
           link.exit().remove();
           force.start();

       }

       function tick() {
          link.attr("x1", function(d) { return Math.round(d.source.x); })
              .attr("y1", function(d) { return Math.round(d.source.y); })
              .attr("x2", function(d) { return Math.round(d.target.x); })
              .attr("y2", function(d) { return Math.round(d.target.y); });

          node.attr("cx", function(d) { return Math.round(d.x); })
              .attr("cy", function(d) { return Math.round(d.y); });
        }

       function rescale() {
            trans=d3.event.translate;
            scale=d3.event.scale;

            vis.attr("transform",
                "translate(" + trans + ")"
                + " scale(" + scale + ")"); 
        }