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”
等諸多類似錯誤,都是告訴我屬性缺失。
研究了很久,最後發現問題所在:
--------未完待續------------