Невозможно визуализировать узлы в макете d3 force

Question

Я пытаюсь изменить свой сценарий визуализации, чтобы больше походить на Modifying a Force Layout Example. Поскольку у меня нет фиксированных узлов, например a, b and c, я добавляю json file для заполнения массива nodes и links.

d3.json("mock.json", function(error, json) { 
    if (error) 
     throw error; 
    nodes = nodes.concat(json.nodes); 
    links = links.concat(json.links); 
    start(); 
}); 

nodes и links имеют правильный размер, то есть узлы, содержит 26 nodes и ссылки 37 links. Теперь я хочу просто визуализировать их, используя line и circle элементов.

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

    node = node.data(force.nodes(), function(d) { return d.id;}); 
    node.enter().append("circle").attr("class", "node").attr("r", 8); 
    node.exit().remove(); 
    force.start(); 
} 

Это очень похоже на пример, и я не совсем понимаю, почему это не сработает. Я даю a demo с макетом. Есть проблема, потому что я использую concat(), а не push() или что-то еще не так?

Answer 1

Ваш код:

d3.json("mock.json", function(error, json) { 

    if (error) 
     throw error; 
    nodes = nodes.concat(json.nodes); 
    links = links.concat(json.links); 
    start(); 
}); 

бы быть похожим на это (причине еще force.nodes() будет пустой массив установлен изначально):

d3.json("mock.json", function(error, json) { 

    if (error) 
     throw error; 
    nodes = nodes.concat(json.nodes); 
    links = links.concat(json.links); 

    force.nodes(nodes); //else force.nodes() will be empty array set initially 
    force.links(links) 

    start(); 
}); 

Следующая:

Ваш код:

link = link.data(force.links(), function(d) { return d.source.id + "-" + d.target.id; }); 

Исправленный код:

link = link.data(force.links(), function(d) { return d.source + "-" + d.target; }); 

Рабочий код here

Надеется, что это помогает!