d3.js, визуализация сети

Question

Как новичок в d3.js, я столкнулся с проблемой визуализации сети. Я пытался исправить это по-разному, но к сожалению ничего плохого не работает. Поэтому мне действительно нужен совет, был бы счастлив, если кто-то может мне помочь. Я получаю сообщение об ошибке в d3.v3.js: 5624:

Uncaught TypeError: Cannot read property 'weight' of undefined

Мой JSON генерирует в контроллере и выглядит следующим образом:

{ "nodes" : 
[{ "Name" : "One", "Weight" : 903 }, 
{ "Name" : "Two", "Weight" : 502 }, 
... 
], 
"links" : 
[{ "Source" : "One", "Target" : "Two", "Volume" : 2 }, 
{ "Source" : "Two", "Target" : "Five", "Volume" : 1 }, 
... 
] 
} 

Так что я звоню

return Json(network, JsonRequestBehavior.AllowGet); 

класс сети:

public class Network 
     { 
      public List<NetworkNodes> nodes {get; set;} 
      public List<NetworkLinks> links{ get; set;} 
      public Network(List<NetworkNodes> a, List<NetworkLinks> b) 
      { 
       nodes = a; 
       links = b; 
      } 

     } 

И сценарий сам по себе:

$(document).ready(function() { 

    var width = 1500, 
     height = 1500; 

    var force = d3.layout.force() 
       .charge(-100) 
       .linkDistance(30) 
       .size([width, height]); 

     var svg = d3.select("body").append("svg") 
      .attr("width", width) 
      .attr("height", height); 

     $.getJSON('@Url.Action("BuildNetwork", "Query")', function (graph) { 
     // Compute the distinct nodes from the links. 
      force 
       .nodes(graph.nodes) 
       .links(graph.links) 
       .start(); 

      var link = svg.selectAll(".link") 
       .data(graph.links) 
       .enter().append("line") 
       .attr("class", "link") 
       .style("stroke-width", function (d) { return Math.sqrt(d.Value); }); 

      var node = svg.selectAll(".node") 
       .data(graph.nodes) 
       .enter().append("circle") 
       .attr("class", "node") 
       .attr("r", 5) 
       .call(force.drag); 

      node.append("title") 
       .text(function (d) { return d.Name; }); 

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

     }); 
}); 

Я знаю, есть некоторые глупая ошибка, я сделал, но я слишком глуп, чтобы понять, где :(

Answer 1

Свойства источника и цели вашего списка ссылок не следует указывать на имена узлов, а скорее на их позицию внутри массива, возвращаемого force.nodes(). Например, если «One» связан с «двойки», то (символически)

Nodes = ["One", "Two"] 

и

Links = [{source: 0, target: 1}] 

Вы можете сделать быстрый поиск в массиве узлов, чтобы найти индекс узла.

Также будьте осторожны со свойством веса вашего узла, некоторые имена свойств зарезервированы для D3 (см here)