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，网络可视化

回答

相关问题