<script type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script>
<script>
var width = 800;
var height = 800;
var svg = d3.select("body")
.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 = [//节点集
{name:"陕西省",group:2.5},
{name:"西安市",group:2},
{name:"安康市",group:2},
{name:"咸阳市",group:2},
{name:"宝鸡市",group:2},
{name:"铜川市",group:2},
{name:"商洛市",group:2},
{name:"汉中市",group:2},
{name:"延安市",group:2},
{name:"兴平市",group:2},
{name:"碑林区",group:1.5},
{name:"未央区",group:1.5},
{name:"莲湖区",group:1.5},
{name:"新城区",group:1.5},
{name:"户县",group:1.5},
{name:"祖庵镇",group:1},
{name:"甘河镇",group:1},
{name:"蒋村镇",group:1},
];
var edges = [//边集
{source:0,target:1,value:2}, //value控制线的长短
{source:0,target:2,value:2},
{source:0,target:3,value:2},
{source:0,target:4,value:2},
{source:0,target:5,value:2},
{source:0,target:6,value:2},
{source:0,target:7,value:2},
{source:0,target:8,value:2},
{source:0,target:9,value:2},
{source:1,target:10,value:1.5},
{source:1,target:11,value:1.5},
{source:1,target:12,value:1.5},
{source:1,target:13,value:1.5},
{source:1,target:14,value:1.5},
{source:14,target:15,value:1},
{source:14,target:16,value:1},
{source:14,target:17,value:1},
];
//设置一个color的颜色比例尺,为了让不同的扇形呈现不同的颜色
var colorScale = d3.scaleOrdinal()
.domain(d3.range(nodes.length))
.range(d3.schemeCategory10);
var forceSimulation = d3.forceSimulation()
.force("link",d3.forceLink())
.force("charge",d3.forceManyBody())
.force("center",d3.forceCenter());
//生成节点数据
forceSimulation.nodes(nodes)
.on("tick",ticked);//这个函数很重要,后面给出具体实现和说明
//生成边数据
forceSimulation.force("link")
.links(edges)
.distance(function(d){//每一边的长度
return d.value*100;
})
//设置图形的中心位置
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){
return colorScale(d.value); //边的颜色
//return "#ccc";
})
.attr("stroke-width",1);
//边上文字
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){
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("circle")
// .attr("r",20)
.attr("r",function (d,i) { //圆圈半径
return d.group*15;
})
.attr("fill",function(d,i){
//return colorScale(i);
return colorScale(d.group);
})
//文字
gs.append("text")
/*.attr("x",-10)
.attr("y",-20)
.attr("dy",10)*/
.attr("x",-25)
.attr("y",-5)
.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;
}
</script>