D3 v3版本繪製力導向圖更新節點時JS控制檯報錯 : attribute cx: Expected length, “NaN”解決辦法

D3的v3版本,很古老了。

拿來繪製力導向圖,初始化代碼如下:

//代碼不完整,僅作演示以說明問題
//節點數組
	var nodes = [ { name: "sssss" ,phone:"18888888888"}, { name: "vvvv" ,phone:"199999999"},{ name: "ggggg" ,phone:"20000000"} ];
	//連線數組
	var edges = [ { source : 0 , target: 1 },{ source : 1 , target: 0 }];
//設置畫布
		var width = 1000;  //畫布的寬度
		var height = 1000;   //畫布的高度

		var svg = d3.select("body")     //選擇文檔中的body元素
		    .append("svg")          //添加一個svg元素
		    .attr("width", width)       //設定寬度
		    .attr("height", height);    //設定高度
		  

		//定義力導向圖佈局
		var force = d3.layout.force()
      		.nodes(nodes) //指定節點數組
      		.links(edges) //指定連線數組
      		.size([width,height]) //指定作用域範圍
      		.linkDistance(150) //指定連線長度
      		.charge([-400]); //相互之間的作用力
		
		//力學作用生效
		force.start();    //開始作用
		//添加連線 
		 var svg_edges = svg.selectAll("line")
		     .data(edges)
		     .enter()
		     .append("line")
		     .style("stroke","#ccc")
		     .style("stroke-width",1);

		 var color = d3.scale.category20();

後來我往節點數組nodes末尾push了一個新元素,再次重繪此力導向圖,就報了幾千個錯:

<circle> attribute cx: Expected length, “NaN”

等諸多類似錯誤,都是告訴我屬性缺失。

研究了很久,最後發現問題所在:

--------未完待續------------

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章