d3.js, 네트워크 시각화

Question

d3.js 초보자로서 네트워크 시각화 문제를 만났습니다. 나는 여러 가지 방법으로 그것을 고치려고했지만 불행하게도 아무 것도 잘 작동하지 않습니다. 그래서 조언이 정말로 필요합니다. 누군가가 나를 도울 수 있으면 행복 할 것입니다. 5624 : : 내 JSON 컨트롤러에서 생성이처럼 보이는

Uncaught TypeError: Cannot read property 'weight' of undefined

:

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

그래서 내가

를 호출하고있어 나는 d3.v3.js에 오류를 받고 있어요

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

     } 

그 자체로 0

그리고 스크립트 : 내가 아는

$(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()가 반환 한 배열 내부의 위치를 ​​가리켜 야합니다. 예를 들어 경우 "하나는"다음 (상징적으로) "2"에 연결되어

Nodes = ["One", "Two"] 

및

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

당신은 노드의 인덱스를 찾기 위해 노드 배열 빠른 검색을 할 수 있습니다. 또한

노드의 무게 속성에주의

, 일부 속성 이름은