idとsource,targetが一致しない

Question

###前提・実現したいこと
以下の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

var nodes = new Array();
var links = new Array();
$.ajax({
	url: 'json4.php',
	type: "GET",
	dataType: 'json',
	scriptCharset: 'utf-8',
}).done(function(data) {
	console.log("ajax通信に成功しました");

	nodes = data["nodes"];
	links = data["links"];

	//以下描画処理
	function drawForce() {
		var width = 1200;
		var height = 600;
		console.log(nodes);
		console.log(links);

		var force = d3.layout.force()
			.nodes(nodes)
			.links(links)
			.size([width, height])
			.distance(380)
			.friction(0.9)
			.charge(-800)
			.gravity(0.1)
			.start();

		// svg領域の作成
		var svg = d3.select("body")
			.append("svg")
			.attr({
				width: width,
				height: height
			});

		// link線の描画(svgのline描画機能を利用)
		var link = svg.selectAll("line")
			.data(links)
			.enter()
			.append("line")
			.style({
				stroke: "#ccc",
				"stroke-width": 1
			});

		var g = svg.selectAll("g")
			.data(nodes)
			.enter()
			.append("g")
			.call(force.drag);

		var a = g.append("a")
			.attr({
				"xlink:href": function(data) {
					return data.url
				},
			});

		var node = a.append("image")
			.attr({
				"xlink:href": function(data) {
					return data.pic
				},
				"width": 80,
				"height": 80
			});


		var label = a.append("text")
			.attr({
				"text-anchor": "middle",
				"fill": "black"
			})
			.style({
				"font-size": 14
			})
			.text(function(data) {
				return data.label;
			});


		force.on("tick", function() {
			link.attr({
				x1: function(d) {
					return d.source.x;
				},
				y1: function(d) {
					return d.source.y;
				},
				x2: function(d) {
					return d.target.x;
				},
				y2: function(d) {
					return d.target.y;
				}
			});
			g.attr("transform", function(d) {
				return "translate(" + d.x + "," + d.y + ")";
			});
		});
	}
	drawForce();
	//以下ajaxエラー時

}).fail(function(XMLHttpRequest, textStatus, errorThrown) {
	console.log("ajax通信に失敗しました");
	console.log("XMLHttpRequest : " + XMLHttpRequest.status);
	console.log("textStatus : " + textStatus);
	console.log("errorThrown : " + errorThrown.message);
})

###console.log

###追記　Cannot read property 'weight' of undefined

getjson.29行めはvar force = d3.layout.force()の.startの行です
78行目はdrawForce();の部分です
###返信用

var nodes = new Array();
var links = new Array();
//以下描画処理
function drawForce() {
     var width = 1200;
     var height = 600;
     console.log(nodes);
     console.log(links);
	
    var force = d3.layout.force()
        .nodes(nodes)
        .links(links)
        .size([width, height])
        .distance(380) 
        .friction(0.9) 
        .charge(-800) 
        .gravity(0.1)
        .start();

    // svg領域の作成
    var svg = d3.select("body")
        .append("svg")
        .attr({width:width, height:height});

    // link線の描画(svgのline描画機能を利用)
    var link = svg.selectAll("line")
        .data(links)
        .enter()
        .append("line")
        .style({stroke: "#ccc",
        "stroke-width": 1
    });
	
  	var g = svg.selectAll("g")
                  .data(nodes)
                  .enter()
                  .append("g")
                  .call(force.drag);

	var a = g.append("a")
	  .attr({"xlink:href":function(data){ return data.url }, });
                  
    	var node = a.append("image")
                  .attr({"xlink:href":function(data){ return data.pic },
                         "width":80,
                         "height":80
                        });
	

                        
    	var label = a.append("text")
                    .attr({"text-anchor":"middle",
                           "fill":"black"})
                    .style({"font-size":14})
                    .text(function(data) { return data.label; });
	   


force.on("tick", function() {
      link.attr({x1: function(d) { return d.source.x; },
                 y1: function(d) { return d.source.y; },
                 x2: function(d) { return d.target.x; },
                 y2: function(d) { return d.target.y; }});
      g.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
    });
}
$.ajax({
    url: 'json4.php',
  type: "GET",
  dataType: 'json',
  scriptCharset:'utf-8',
  }).done(function(data){
	console.log("ajax通信に成功しました");
console.log(data);
	nodes = data["nodes"];
	links = data["links"];


drawForce();
//以下ajaxエラー時

}).fail(function(XMLHttpRequest, textStatus, errorThrown){
	console.log("ajax通信に失敗しました");
	console.log("XMLHttpRequest : " + XMLHttpRequest.status);
	console.log("textStatus : " + textStatus);
	console.log("errorThrown : " + errorThrown.message);
})
```プロパティweight
![イメージ説明](1524736b1206c643a9bc1315344cfa84.png)

Comments

[m.ts10806]

「Cannot read property 'weight' of undefined」はどこで発生していますか？また、ユーザー定義関数drawForce()をajax記述よりも外に出した場合（というかグローバル空間）はどうなりますか？

[maigoneko]

fail後にfunction drawForceを記述すると、空のnodesとlinksがコンソールに表示されます　またCannot read property 'weight' of undefinedの場所は今追記しておきました

[maigoneko]

あと返信遅れてしまい申し訳ありません

[m.ts10806]

fail後がどこを指しているか分からないですが、ajax(){} の外です。var nodesやvar linksと同列の場所です。（グローバル空間と書いたのですが・・・）

[maigoneko]

返信用追記のように書いていたのですがこれでは間違えているのでしょうか

[m.ts10806]

drawForce();はdoneの中に入れとかないとnodes もlinksも空のままかと思いますが・・・。もしくはajax通信終わる前に実行されてしまいますよ。

[m.ts10806]

function drawForce() {}は外に、実際に呼び出しであるdrawForce();はdoneの中に。

[m.ts10806]

結局はweightというプロパティは存在しないというのがエラーメッセージなので、取得したオブジェクトであるdataでそういうプロパティがあるか調べる必要があります。widthと打とうとしてweightとスペルミスが起きたとか、そんな感じだとは思いますが。

[maigoneko]

自身が作成したプログラムにはjs php含めweightの記述はありませんでした　しかしweightは表示されています

Answer 1

英語版Stackflowですが、同様のエラーにお悩みの方がいました、

• d3.js: “Cannot read property 'weight' of undefined” when manually....

色々な意見が出ていますが、
air_bobさんの回答

I encounter same problem before, it is due to there is null values in source/target of links. print out nodes and links information might help to debug

私は前に同じ問題が発生している、それはリンクのソース/ターゲットにnull値があるためです。 ノードやリンクを表示して情報をデバッグするのに役立つかもしれない（Google翻訳そのまま）

や
elachellさんの回答

In addition to the answers mentioning the null in the source/target of links, the reason for this could be the assignment of an out-of-range source/target. E.g. you have 10 nodes and you assign the target to be the 11-th indexed node.

リンクのソース/ターゲットにnullを示す回答に加えて、これの理由は範囲外のソース/ターゲットの割り当てになる可能性があります。 例えば。 10個のノードがあり、11番目の索引ノードになるようにターゲットを割り当てます。（Google翻訳そのまま）

が参考になるかもしれません。

ptimさんの回答は解決に至れそうなコードも載せてくれているので参考にしてください。

Comments

[maigoneko]

わかりました
weightのエラーについてはStackflowを頼りにまた考えてみます

[maigoneko]

遅れながらも、以下の質問を参考にして問題解決まで持っていけました
助言をいただき本当にありがとうございました！
https://stackoverflow.com/questions/23986466/d3-force-layout-linking-nodes-by-name-instead-of-index?noredirect=1&lq=1