###前提・実現したいこと
以下のjavascriptを用いて、d3.jsでのforceレイアウトの描画をしたいと考えています。
###発生している問題・エラーメッセージ
現状だとnodes[0] = links["source"]になってしまっています。
最終的にはnodesのidをもとに、souceとtargetの関係を描画したいと考えています
(例)
nodes id:1 ユーザー:test1
nodes id:2 ユーザー:test2
source:1= nodes:id1
target:2=nodes:id2 (test1 → test2の関係)
このようにするためには、どうのように改良すればsourceの値を正しく参照できるのでしょうか?
また以下のようなエラーも、ブラウザコンソール上で発生しています
Cannot read property 'weight' of undefined
javascript
1var nodes = new Array(); 2var links = new Array(); 3$.ajax({ 4 url: 'json4.php', 5 type: "GET", 6 dataType: 'json', 7 scriptCharset: 'utf-8', 8}).done(function(data) { 9 console.log("ajax通信に成功しました"); 10 11 nodes = data["nodes"]; 12 links = data["links"]; 13 14 //以下描画処理 15 function drawForce() { 16 var width = 1200; 17 var height = 600; 18 console.log(nodes); 19 console.log(links); 20 21 var force = d3.layout.force() 22 .nodes(nodes) 23 .links(links) 24 .size([width, height]) 25 .distance(380) 26 .friction(0.9) 27 .charge(-800) 28 .gravity(0.1) 29 .start(); 30 31 // svg領域の作成 32 var svg = d3.select("body") 33 .append("svg") 34 .attr({ 35 width: width, 36 height: height 37 }); 38 39 // link線の描画(svgのline描画機能を利用) 40 var link = svg.selectAll("line") 41 .data(links) 42 .enter() 43 .append("line") 44 .style({ 45 stroke: "#ccc", 46 "stroke-width": 1 47 }); 48 49 var g = svg.selectAll("g") 50 .data(nodes) 51 .enter() 52 .append("g") 53 .call(force.drag); 54 55 var a = g.append("a") 56 .attr({ 57 "xlink:href": function(data) { 58 return data.url 59 }, 60 }); 61 62 var node = a.append("image") 63 .attr({ 64 "xlink:href": function(data) { 65 return data.pic 66 }, 67 "width": 80, 68 "height": 80 69 }); 70 71 72 var label = a.append("text") 73 .attr({ 74 "text-anchor": "middle", 75 "fill": "black" 76 }) 77 .style({ 78 "font-size": 14 79 }) 80 .text(function(data) { 81 return data.label; 82 }); 83 84 85 force.on("tick", function() { 86 link.attr({ 87 x1: function(d) { 88 return d.source.x; 89 }, 90 y1: function(d) { 91 return d.source.y; 92 }, 93 x2: function(d) { 94 return d.target.x; 95 }, 96 y2: function(d) { 97 return d.target.y; 98 } 99 }); 100 g.attr("transform", function(d) { 101 return "translate(" + d.x + "," + d.y + ")"; 102 }); 103 }); 104 } 105 drawForce(); 106 //以下ajaxエラー時 107 108}).fail(function(XMLHttpRequest, textStatus, errorThrown) { 109 console.log("ajax通信に失敗しました"); 110 console.log("XMLHttpRequest : " + XMLHttpRequest.status); 111 console.log("textStatus : " + textStatus); 112 console.log("errorThrown : " + errorThrown.message); 113}) 114 115 116
###追記 Cannot read property 'weight' of undefined
getjson.29行めはvar force = d3.layout.force()の.startの行です
78行目はdrawForce();の部分です
###返信用
JavaScript
1var nodes = new Array(); 2var links = new Array(); 3//以下描画処理 4function drawForce() { 5 var width = 1200; 6 var height = 600; 7 console.log(nodes); 8 console.log(links); 9 10 var force = d3.layout.force() 11 .nodes(nodes) 12 .links(links) 13 .size([width, height]) 14 .distance(380) 15 .friction(0.9) 16 .charge(-800) 17 .gravity(0.1) 18 .start(); 19 20 // svg領域の作成 21 var svg = d3.select("body") 22 .append("svg") 23 .attr({width:width, height:height}); 24 25 // link線の描画(svgのline描画機能を利用) 26 var link = svg.selectAll("line") 27 .data(links) 28 .enter() 29 .append("line") 30 .style({stroke: "#ccc", 31 "stroke-width": 1 32 }); 33 34 var g = svg.selectAll("g") 35 .data(nodes) 36 .enter() 37 .append("g") 38 .call(force.drag); 39 40 var a = g.append("a") 41 .attr({"xlink:href":function(data){ return data.url }, }); 42 43 var node = a.append("image") 44 .attr({"xlink:href":function(data){ return data.pic }, 45 "width":80, 46 "height":80 47 }); 48 49 50 51 var label = a.append("text") 52 .attr({"text-anchor":"middle", 53 "fill":"black"}) 54 .style({"font-size":14}) 55 .text(function(data) { return data.label; }); 56 57 58 59force.on("tick", function() { 60 link.attr({x1: function(d) { return d.source.x; }, 61 y1: function(d) { return d.source.y; }, 62 x2: function(d) { return d.target.x; }, 63 y2: function(d) { return d.target.y; }}); 64 g.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 65 }); 66} 67$.ajax({ 68 url: 'json4.php', 69 type: "GET", 70 dataType: 'json', 71 scriptCharset:'utf-8', 72 }).done(function(data){ 73 console.log("ajax通信に成功しました"); 74console.log(data); 75 nodes = data["nodes"]; 76 links = data["links"]; 77 78 79drawForce(); 80//以下ajaxエラー時 81 82}).fail(function(XMLHttpRequest, textStatus, errorThrown){ 83 console.log("ajax通信に失敗しました"); 84 console.log("XMLHttpRequest : " + XMLHttpRequest.status); 85 console.log("textStatus : " + textStatus); 86 console.log("errorThrown : " + errorThrown.message); 87}) 88```プロパティweight 89![イメージ説明](1524736b1206c643a9bc1315344cfa84.png)
回答1件
あなたの回答
tips
プレビュー