d3.js，網絡可視化

作爲d3.js的初學者，我遇到了網絡可視化中的一個問題。我試圖用很多方式解決它，但不幸的是沒有什麼效果。所以我真的需要一個建議，如果有人能幫助我會很高興。我得到的d3.v3.js一個錯誤：5624：d3.js，網絡可視化

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

     }); 
});

我知道，有一些愚蠢的錯誤我已經作出，但我太愚蠢明白的地方:(

來源

2013-08-12 Galina Bezobrazova

是什麼'@ Url.Action（「BuildNetwork」，「查詢」）'返回？ afaik，'$ .getJSON'將URL傳遞給帶有JSON的文件...不知道您是否可以像這樣使用它。另外，你的錯誤報告了一個「權重」值，在你的JSON中，你有一個「權重」值...注意第一個字母的大小寫...... – Joum

難道是在json中權重有一個大寫字母W但顯示的錯誤是小寫的？ – BentOnCoding

我正在嘗試所有可能的更正，以及「重量」以及。不幸的是，問題仍然在這裏:( –

你的鏈接列表的源和目標屬性不應指向節點名稱，而應指向由force.nodes（）返回的數組內的位置。例如，如果「一」是與「雙」，然後（象徵）

Nodes = ["One", "Two"]

和

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

你可以做你的節點陣列上的快速搜索來查找節點的索引。

另外要小心你的節點的權重屬性，某些屬性名稱被保留用於D3（見here）

來源

2013-08-12 11:06:34

謝謝你的答案！但重點是，我已經嘗試過了（我的意思是將字段與「源」和「目標」與節點編號整數），仍然會發生同樣的問題...看起來像一個業力））） –

字段名稱應該是小寫（'Target' - >'target'等）。 – MasterAM

它可能不起作用，但源/目標表示法仍需引用節點索引。正如@MasterAM所說的，你必須把它寫成小寫字母，也是在'tick'函數中。不要忘記用'size'來代替'weight'，但在任何情況下都不要使用'weight'。 –

d3.js，網絡可視化

回答

相關問題