d3.js V5版本在vue里使用 自定义节点图片

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;

}