Question

我正在使用d3.js和jquery与PHP后端（基于yii框架）来创建动态强制有向图，以表示我们使用Nagios监视的网络上的主机和服务的当前状态。 / p>

图表显示root - ＆gt;主机组 - ＆gt;主机 - ＆gt;服务。我已经创建了一个服务器端函数来以下列格式返回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}）; 宽度= 960，身高= 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);

可以在Network Visualization

以上所有操作都正常，但每次代码循环时都会导致可视化重新启动，节点会一直反弹直到它们稳定下来。我需要的是任何当前项目保持不变，但任何新节点和链接都添加到可视化中，并且可点击和拖动等。

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

Answer 1

我已经设法使用上述所有建议的混合物找到问题的解决方案，下面是我使用的代码

    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 + ")"); 
        }

Answer 2

看看这个答案。您需要一个唯一的节点标识符，您可以看到它。

Updating links on a force directed graph from dynamic json data

Answer 3

我最近尝试做同样的事情，这是我提出的解决方案。我所做的是使用links.php加载第一批数据，然后使用newlinks.php更新它们，两者都返回带有属性sender和receiver的对象列表的JSON。在此示例中，newlinks每次都返回一个新的发送方，我将接收方设置为随机选择的旧节点。

$.post("links.php", function(data) {
// Functions as an "initializer", loads the first data
// Then newlinks.php will add more data to this first batch (see below)
var w = 1400,
    h = 1400;

var svg = d3.select("#networkviz")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

var links = [];
var nodes = [];

var force = d3.layout.force()
                     .nodes(nodes)
                     .links(links)
                     .size([w, h])
                     .linkDistance(50)
                     .charge(-50)
                     .on("tick", tick);

svg.append("g").attr("class", "links");
svg.append("g").attr("class", "nodes");

var linkSVG = svg.select(".links").selectAll(".link"),
    nodeSVG = svg.select(".nodes").selectAll(".node");

handleData(data);
update();

// This is the server call
var interval = 5; // set the frequency of server calls (in seconds)
setInterval(function() {
    var currentDate = new Date();
    var beforeDate = new Date(currentDate.setSeconds(currentDate.getSeconds()-interval));
    $.post("newlinks.php", {begin: beforeDate, end: new Date()}, function(newlinks) {
        // newlinks.php returns a JSON file with my new transactions (the one that happened between now and 5 seconds ago)
        if (newlinks.length != 0) { // If nothing happened, then I don't need to do anything, the graph will stay as it was
            // here I decide to add any new node and never remove any of the old ones
            // so eventually my graph will grow extra large, but that's up to you to decide what you want to do with your nodes
            newlinks = JSON.parse(newlinks);
            // Adds a node to a randomly selected node (completely useless, but a good example)
            var r = getRandomInt(0, nodes.length-1);
            newlinks[0].receiver = nodes[r].id;
            handleData(newlinks);
            update();
        }
    });
}, interval*1000);

function update() {
    // enter, update and exit
    force.start();

    linkSVG = linkSVG.data(force.links(), function(d) { return d.source.id+"-"+d.target.id; });
    linkSVG.enter().append("line").attr("class", "link").attr("stroke", "#ccc").attr("stroke-width", 2);
    linkSVG.exit().remove();

    var r = d3.scale.sqrt().domain(d3.extent(force.nodes(), function(d) {return d.weight; })).range([5, 20]);
    var c = d3.scale.sqrt().domain(d3.extent(force.nodes(), function(d) {return d.weight; })).range([0, 270]);

    nodeSVG = nodeSVG.data(force.nodes(), function(d) { return d.id; });
    nodeSVG.enter()
           .append("circle")
           .attr("class", "node")
    // Color of the nodes depends on their weight
    nodeSVG.attr("r", function(d) { return r(d.weight); })
           .attr("fill", function(d) {
               return "hsl("+c(d.weight)+", 83%, 60%)";
           });
    nodeSVG.exit().remove();    
}

function handleData(data) {
    // This is where you create nodes and links from the data you receive
    // In my implementation I have a list of transactions with a sender and a receiver that I use as id
    // You'll have to customize that part depending on your data
    for (var i = 0, c = data.length; i<c; i++) {
        var sender = {id: data[i].sender};
        var receiver = {id: data[i].receiver};
        sender = addNode(sender);
        receiver = addNode(receiver);
        addLink({source: sender, target: receiver});
    }
}

// Checks whether node already exists in nodes or not
function addNode(node) {
    var i = nodes.map(function(d) { return d.id; }).indexOf(node.id);
    if (i == -1) {
        nodes.push(node);
        return node;
    } else {
        return nodes[i];
    }
}

// Checks whether link already exists in links or not
function addLink(link) {
    if (links.map(function(d) { return d.source.id+"-"+d.target.id; }).indexOf(link.source.id+"-"+link.target.id) == -1
        && links.map(function(d) { return d.target.id+"-"+d.source.id; }).indexOf(link.source.id+"-"+link.target.id) == -1)
        links.push(link);
}

function tick() {
    linkSVG.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;});
    nodeSVG.attr("cx", function(d) {return d.x})
            .attr("cy", function(d) {return d.y});
}

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
}, "json");

这是一个非常具体的实现，因此您应根据服务器输出填写必要的漏洞。但我相信D3主干是正确的，你在寻找:) 这是一个玩它的JSFiddle：http://jsfiddle.net/bTyh5/2/

This code非常有用，并激发了这里介绍的一些部分。

Answer 4

您实际上不需要将任何内容传递回服务器，只要服务器端，您就可以告诉新的nodes和links正在生成。然后，不是重新加载整个d3脚本，而是加载一次，然后在force.on("tick", function())中，进行10秒超时AJAX调用，从服务器获取要添加的新data，无论是nodes还是links。

例如，假设您最初在服务器中拥有此JSON：

[
    {
        "nodes": [
            {
                "name": "MaaS",
                "object_id": 0
            },
            {
                "name": "Convergence",
                "object_id": "531",
                "colour": "#999900"
            }
        ]
    },
    {
        "links": [
            {
                "source": 0,
                "target": "531"
            }
        ]
    }
]

您可以使用AJAX从服务器获取它并使用json = $.parseJSON(json);解析它。

然后，编写timeout，以便在<{1}}中运行，而不是在计算布局后运行。然后，再次在success上解析您从服务器获得的新JSON，并将the_new_ success和nodes分别添加到已存在的links和force.nodes

请注意，我没有对此进行测试，我不确定它是如何工作和/或执行的，但我认为一般方法是可行的。

D3 Force Directed Graph ajax更新

4 个答案: