Обновление ссылок на силовом графике из динамических данных json

Я новичок в D3 и работаю над графиком, ориентированным на силу, где данные json являются динамическими. Я могу изменить график силы при получении новых данных, но это происходит с эффектом пружины. Код, который создает мой график силы:

Я могу создать новый график, когда будет получена новая строка json, снова вызвав всю функцию. Это создает новый граф вместо старого. Я не могу обновить старый график с новым набором значений по мере получения значений; узлы в моем графе не изменяются, изменяется только соотношение между ними.

Я наткнулся на пример (http://bl.ocks.org/1095795), где новый node удаляется и воссоздается, но реализация немного другой.

Любые указатели или помощь будут действительно оценены.

Ответы

Ответ 1

Ну, я мог бы найти решение, просматривая его, размещая его здесь для тех, кто нуждается в помощи по этой теме. Идея состоит в том, чтобы создать объект графа и поиграть с узлами и массивами ссылок. Код JS имеет следующий вид:

var graph;
function myGraph(el) {

// Add and remove elements on the graph object
this.addNode = function (id) {
    nodes.push({"id":id});
    update();
};

this.removeNode = function (id) {
    var i = 0;
    var n = findNode(id);
    while (i < links.length) {
        if ((links[i]['source'] == n)||(links[i]['target'] == n))
        {
            links.splice(i,1);
        }
        else i++;
    }
    nodes.splice(findNodeIndex(id),1);
    update();
};

this.removeLink = function (source,target){
    for(var i=0;i<links.length;i++)
    {
        if(links[i].source.id == source && links[i].target.id == target)
        {
            links.splice(i,1);
            break;
        }
    }
    update();
};

this.removeallLinks = function(){
    links.splice(0,links.length);
    update();
};

this.removeAllNodes = function(){
    nodes.splice(0,links.length);
    update();
};

this.addLink = function (source, target, value) {
    links.push({"source":findNode(source),"target":findNode(target),"value":value});
    update();
};

var findNode = function(id) {
    for (var i in nodes) {
        if (nodes[i]["id"] === id) return nodes[i];};
};

var findNodeIndex = function(id) {
    for (var i=0;i<nodes.length;i++) {
        if (nodes[i].id==id){
            return i;
        }
        };
};

// set up the D3 visualisation in the specified element
var w = 500,
    h = 500;
var vis = d3.select("#svgdiv")
    .append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .attr("id","svg")
    .attr("pointer-events", "all")
    .attr("viewBox","0 0 "+w+" "+h)
    .attr("perserveAspectRatio","xMinYMid")
    .append('svg:g');

var force = d3.layout.force();

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

var update = function () {
      var link = vis.selectAll("line")
        .data(links, function(d) {
            return d.source.id + "-" + d.target.id; 
            });

    link.enter().append("line")
        .attr("id",function(d){return d.source.id + "-" + d.target.id;})
        .attr("class","link");
    link.append("title")
    .text(function(d){
        return d.value;
    });
    link.exit().remove();

    var node = vis.selectAll("g.node")
        .data(nodes, function(d) { 
            return d.id;});

    var nodeEnter = node.enter().append("g")
        .attr("class", "node")
        .call(force.drag);

    nodeEnter.append("svg:circle")
    .attr("r", 16)
    .attr("id",function(d) { return "Node;"+d.id;})
    .attr("class","nodeStrokeClass");

    nodeEnter.append("svg:text")
    .attr("class","textClass")
    .text( function(d){return d.id;}) ;

    node.exit().remove();
    force.on("tick", function() {

        node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y         + ")"; });

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

    // Restart the force layout.
    force
    .gravity(.05)
    .distance(50)
    .linkDistance( 50 )
    .size([w, h])
    .start();
};


// Make it all go
update();
}

function drawGraph()
{
graph = new myGraph("#svgdiv");
graph.addNode('A');
graph.addNode('B');
graph.addNode('C');
graph.addLink('A','B','10');
graph.addLink('A','C','8');
graph.addLink('B','C','15');
}

Ответ 2

Я принял отличный пример Rahuls, внес некоторые изменения и опубликовал bl.ock в комплекте с анимацией с течением времени, если кто-то заинтересован в полностью функционирующем примере. Добавление/удаление ссылок/узлов действительно должно быть проще, чем это, но все еще довольно круто.

http://bl.ocks.org/ericcoopey/6c602d7cb14b25c179a4

Ответ 3

В дополнение к вызову drawGraph() в готовой функции вы также можете вставлять опубликованный код внутри встроенного блока <script></script>.

Вот как справляется большинство руководств на сайте d3.