d3 сложные данные, обновление для существующих узлов

Я искал сетевой лот и не мог получить ответа на исправление.d3 сложные данные, обновление для существующих узлов

Проблема: у меня есть сложные данные для представления узла в d3. основанного на узле, я поставлю метку узла. На заднем конце выполняется прерывание, чтобы генерировать узлы и ссылки и предоставляет json. Исходя из логики, имя узла изменится. Каждые 5 секунд браузер делает Ajax-вызов и получает узлы и связывает данные json. Когда имя узла изменяется, оно не обновляется в соответствии с новыми данными.

D3 Код:

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

.node circle { 
    cursor: pointer; 
    stroke: #3182bd; 
    stroke-width: 1.5px; 
} 

.node text { 
    font: 10px sans-serif; 
    pointer-events: none; 
    text-anchor: middle; 
} 

line.link { 
    fill: none; 
    stroke: #9ecae1; 
    stroke-width: 1.5px; 
} 
.overlay { 
    fill: none; 
    pointer-events: all; 
} 


</style> 
<body> 
<p><h1>Topology View</h1> 
<button id = "refresh" type="button" onclick="refresh()" >Refresh</button></p> 
<script type="text/javascript" src="d3.min.js"></script> 
<script> 

var nodes ; 
var links; 
var width = window.innerWidth-30, 
    height = window.innerHeight-140, 
    root; 
document.getElementById("refresh").disabled = false; 

var force = d3.layout.force() 
    .linkDistance(100) 
    .charge(-120) 
    .gravity(.03) 
    .size([width, height]) 
    .on("tick", tick); 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .style("border", "1px solid black") 
    .attr("height", height); 

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

d3.json("topoJson.json", function(error, json) { 
    if (error) throw error; 

    root = json; 
    update(); 

}); 

function update() { 
    nodes = root.nodes; 
    links = root.links; 

    // Restart the force layout. 
    force 
     .nodes(nodes) 
     .links(links) 
     .start(); 

    // Update links. 
    link = link.data(links, function(d) { return d.target.id; }); 

    link.exit().remove(); 

    link.enter().insert("line", ".node") 
     .attr("class", "link"); 

    // Update nodes. 
    node = node.data(nodes, function(d) { return d.id; }); 

    node.exit().remove(); 


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

    nodeEnter.append("circle") 
      .attr("r", 20) 
      .attr("id", function(d) { return d.id; }); 

    nodeEnter.append("text") 
     .attr("dy", ".35em") 
     .text(function(d) { return d.name; }); 

    node.select("circle") 
     .style("fill", color); 
} 

function tick() { 
    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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 
} 

function color(d) { 
    return d.type == 'S' ? "#c6dbef": "#fd8d3c"; 
} 

function refresh() { 
d3.json("topoJson.json", function(error, json) { 
    if (error) throw error; 

    root = json; 
    update(); 
console.log(root); 
}); 
} 
</script>

На Refresh, на самом деле данные должны поступать от сервера, но здесь я сделал это чтение из файла. Изменение json не отражается. Каждый раз, когда я нажимаю кнопку «Обновить», я меняю json в файле. изменение будет именем узла. Это имя должно отражать в тексте узла d3. Я мог видеть изменение в console.log, но не в имени узла d3.

topoJson.json

{ 
    "nodes": [ 
    { 
     "type": "S", 
     "id": "1", 
     "name": "100" 
    }, 
    { 
     "type": "S", 
     "id": "2", 
     "name": "2" 
    }, 
    { 
     "type": "S", 
     "id": "3", 
     "name": "3" 
    }, 
    { 
     "type": "S", 
     "id": "4", 
     "name": "4" 
    }, 
    { 
     "type": "S", 
     "id": "5", 
     "name": "5" 
    }, 
    { 
     "type": "S", 
     "id": "6", 
     "name": "6" 
    }, 
    { 
     "type": "S", 
     "id": "7", 
     "name": "7" 
    }, 
    { 
     "type": "S", 
     "id": "8", 
     "name": "8" 
    }, 
    { 
     "type": "S", 
     "id": "9", 
     "name": "9" 
    }, 
    { 
     "type": "S", 
     "id": "10", 
     "name": "10" 
    }, 
    { 
     "id": "10.10.0.5", 
     "name": "h5" 
    }, 
    { 
     "id": "10.10.0.3", 
     "name": "h3" 
    } 
    ], 
    "links": [ 
    { 
     "source": 2, 
     "target": 10 
    }, 
    { 
     "source": 2, 
     "target": 11 
    }, 
    { 
     "source": 2, 
     "target": 0 
    }, 
    { 
     "source": 3, 
     "target": 5 
    }, 
    { 
     "source": 8, 
     "target": 9 
    }, 
    { 
     "source": 5, 
     "target": 6 
    }, 
    { 
     "source": 7, 
     "target": 1 
    }, 
    { 
     "source": 1, 
     "target": 3 
    }, 
    { 
     "source": 0, 
     "target": 7 
    }, 
    { 
     "source": 6, 
     "target": 8 
    }, 
    { 
     "source": 9, 
     "target": 4 
    } 
    ] 
}

Я создал скрипку. щелкните обновление, чтобы загрузить топологию, и щелкните изменение, чтобы внести изменения и обновить коэффициент усиления.

http://jsfiddle.net/pkolanda/hmob49p3/21/

В основном в изменении я меняюсь имя.

Пожалуйста, помогите мне в устранении проблемы.

источник

2015-10-04 Prakash

Вам не хватает выбора для обновления. Выбор enter() определяет узлы DOM, которые необходимо добавить, а выбор exit() идентифицирует узлы DOM, которые необходимо удалить. То, что вы хотите (для этого вопроса), - это узлы DOM, которые необходимо обновить. Это то, что возвращает функция data(). Не углубляясь в ваш код слишком глубоко, должно быть что-то вроде следующего:

node = node.data(nodes, function(d) { return d.id; }); 

node.select("text") 
    .text(function(d) { return d.name; }); 

var nodeEnter = node.enter().append("g") // ...

источник

2015-10-04 17:24:14

Спасибо, Стивен Томас. фактически я делал это в своем фактическом коде. в этом коде ваше решение сработало. позвольте мне узнать, что является фактической ошибкой, которую я сделал, и будет обновлять поток. – Prakash

Я пропустил полуточку после инструкции return в id функции узлов. Это вызовет такую проблему? node.data (узлы, функция (d) {return d.id}); , Это только ошибка, которую я могу найти в своем основном коде – Prakash

d3 сложные данные, обновление для существующих узлов

ответ

Смежные вопросы