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;
}
