var width = this.$refs.topInfo.offsetWidth;
var height = this.$refs.topInfo.offsetHeight;
var img_w = 77;
var img_h = 80;
var radius = 30;
//console.log(width,height)
var svg = d3.select("#forceDirected")
.append("svg")
.attr("width",width)
.attr("height",height);
var marge = {top:10,bottom:10,left:10,right:10}
var g = svg.append("g")
.attr("transform","translate("+marge.top+","+marge.left+")");
//准備數據
var nodes = list.payload.data.vertices
var edges = list.payload.data.edges
for(var i=0 ; i < edges.length ; i++){
edges[i]['source'] = edges[i].bzrmc
edges[i]['target'] = edges[i].khmc
edges[i]['relation'] = edges[i].dblx
}
edges.forEach(function (e) {
var sourceNode = nodes.filter(function (n) {
return n.name === e.source;
})[0],
targetNode = nodes.filter(function (n) {
return n.name === e.target;
})[0];
e.source = targetNode
e.target = sourceNode
});
// console.log(edges,nodes)
//設置一個color的顏色比例尺，為了讓不同的扇形呈現不同的顏色
var colorScale = d3.scaleOrdinal()
.domain(d3.range(nodes.length))
.range(d3.schemeCategory10);
var forceSimulation = d3.forceSimulation()
.force("link",d3.forceLink().id(function(d){return d.id}))
.force("charge",d3.forceManyBody().strength(-300).distanceMax(200))
.force("center",d3.forceCenter(width/2,height/2))
//生成節點數據
forceSimulation.nodes(nodes)
.on("tick",ticked)//這個函數很重要，后面給出具體實現和說明
//生成邊數據
forceSimulation.force("link")
.links(edges)
.distance(function(d){//每一邊的長度
return 130;
})
//設置圖形的中心位置
forceSimulation.force("center")
.x(width/2)
.y(height/2);
//在瀏覽器的控制台輸出
// console.log(nodes);
//console.log(edges);
//繪制邊
var links = g.append("g")
.selectAll("line")
.data(edges)
.enter()
.append("line")
.attr("stroke",function(d,i){
// console.log(d.value)
return colorScale(d.value); //邊的顏色
//return "#ccc";
})
.attr("stroke-width",1)
.attr("marker-end", "url(#resolved)" );//根據箭頭標記的id號引用箭頭;
var marker= g.append("marker")
// .selectAll("line")//注意SVG規范中明確指出，附加到一個'Marker'元素上的“事件屬性和事件的listener”不會被處理
// g.append("marker")//添加一個marker標簽來繪制箭頭
.attr("id", "resolved")//箭頭id，用於其他標記進行引用時的url
.attr("markerUnits","userSpaceOnUse")//定義標記的坐標系統，userSpaceOnUse表示按照引用的元件來決定，strokeWidth按照用戶單位決定
.attr("viewBox", "0 -5 10 10")//坐標系的區域
.attr("refX",24)//箭頭坐標
.attr("refY", 0)
.attr("markerWidth", 12)//標識的大小
.attr("markerHeight", 12)
.attr("orient", "auto")//繪制方向，可設定為：auto（自動確認方向）和 角度值
.attr("stroke-width",3)//箭頭寬度
.append("path")
.attr("d", "M0,-5L10,0L0,5")//繪制箭頭，路徑為一個三角形，有疑問參考svg的path http://www.runoob.com/svg/svg-path.html
.attr('fill','red');//箭頭顏色
//邊上文字
var linksText = g.append("g")
.selectAll("text")
.data(edges)
.enter()
.append("text")
.text(function(d){
return d.relation;
})
//建立用來放在每個節點和對應文字的分組<g>
var gs = g.selectAll(".circleText")
.data(nodes)
.enter()
.append("g")
.attr("transform",function(d,i){
// console.log(d,i)
var cirX = d.x;
var cirY = d.y;
return "translate("+cirX+","+cirY+")";
})
.call(d3.drag()
.on("start",started)
.on("drag",dragged)
.on("end",ended)
);
gs.append("image")
.attr("xlink:href",this.peopleUrl)
.attr("width",60)
.attr("height",60)
.attr("x",-35)
.attr("y",-30)
.attr("dy",10)
//文字
gs.append("text")
/*.attr("x",-10)
.attr("y",-20)
.attr("dy",10)*/
.attr("id","textclass")
.attr("x",-25)
.attr("y",30)
.attr("dy",10)
.text(function(d){
return d.name;
})
function ticked(){
links
.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;});
linksText
.attr("x",function(d){
return (d.source.x+d.target.x)/2;
})
.attr("y",function(d){
return (d.source.y+d.target.y)/2;
});
gs
.attr("transform",function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}
//drag
function started(d){
if(!d3.event.active){
forceSimulation.alphaTarget(0.8).restart();//設置衰減系數，對節點位置移動過程的模擬，數值越高移動越快，數值范圍[0，1]
}
d.fx = d.x;
d.fy = d.y;
}
function dragged(d){
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function ended(d){
if(!d3.event.active){
forceSimulation.alphaTarget(0);
}
d.fx = null;
d.fy = null;
}