【D3.js数据可视化系列教程】(二十四)--力导向图

//(1)定义节点和联系对象数组

var dataset={
nodes:[//节点
  { name:"Adam"},
  { name:"Bob"},
  { name:"Carride"},
  { name:"Donovan"},
  { name:"Edward"},
  { name:"Felicity"},
  { name:"George"},
  { name:"Hannah"},
  { name:"Iris"},
  { name:"Jerry"} 
 ],
edges:[//边
  { source:0,target:1,weight:1,color:1},
  { source:0,target:2,weight:3,color:4},
  { source:0,target:3,weight:4,color:6},
  { source:0,target:4,weight:6,color:65},
  { source:1,target:5,weight:3,color:76},
  { source:2,target:5,weight:8,color:879},
  { source:2,target:5,weight:7,color:989},
  { source:3,target:4,weight:9,color:643},
  { source:5,target:8,weight:1,color:54},
  { source:5,target:9,weight:3,color:54}, 
  { source:6,target:7,weight:4,color:45},
  { source:7,target:8,weight:0,color:43},
  { source:2,target:8,weight:8,color:243},
  { source:3,target:8,weight:1,color:43},
  { source:5,target:8,weight:5,color:13},
  { source:6,target:8,weight:3,color:351},
  { source:8,target:9,weight:4,color:1}
 ]
};

//(2)转化数据为适合生成力导向图的对象数组

  var force=d3.layout.force()
     .nodes(dataset.nodes)//加载节点数据
     .links(dataset.edges)//加载边数据
     .size([w,h])//设置有效空间的大小
     .linkDistance(50)//连线的长度
     .charge(-200)//负电荷量,相互排斥设置的负值越大越排斥
     .start();//设置生效

//(3)创建作为连线的svg直线

var edges=svg.selectAll("line")
.data(dataset.edges)
.enter()
.append("line")
.style("stroke",function(d){// 设置线的颜色
 return colors(d.color);
})
.style("stroke-width",function(d,i){//设置线的宽度
 return d.weight;
});

//(4) 创建作为连线的svg圆形

var nodes=svg.selectAll("circle")
.data(dataset.nodes)
.enter()
.append("circle")
.attr("r",function(d){//设置圆点的半径,圆点的度越大weight属性值越大,可以对其做一点数学变换
 return Math.log(d.weight)*10;
})
.style("fill",function(d){
 return colors(d.weight*d.weight*d.weight);
})
.call(force.drag);//可以拖动 

 //(5)打点更新,没有的话就显示不出来了

force.on("tick",function(){
 edges.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;
 });

//(6)设置节点坐标,节点先生成再确定坐标的

nodes.attr("cx",function(d){//节点有坐标属性
  return d.x;
 })
 .attr("cy",function(d){
  return d.y;
 });
 
})

先设置坐标再打点的失误效果

【D3.js数据可视化系列教程】(二十四)--力导向图_第1张图片

合理的力导向图(可拖动)

【D3.js数据可视化系列教程】(二十四)--力导向图_第2张图片

 

<!DOCTYPE html>
<html>
  <head>
		<meta charset="utf-8">
		<title>testD3-22-force.html</title>
		<script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script>
	<style type="text/css">
	</style>
	</head>
	<body>
		<script type="text/javascript">
var h=300;
var w=300;
// 颜色函数
		var colors=d3.scale.category20()//创建序数比例尺和包括20中颜色的输出范围
//(1)定义节点和联系对象数组
		var dataset={
nodes:[//节点
		{ name:"Adam"},
		{ name:"Bob"},
		{ name:"Carride"},
		{ name:"Donovan"},
		{ name:"Edward"},
		{ name:"Felicity"},
		{ name:"George"},
		{ name:"Hannah"},
		{ name:"Iris"},
		{ name:"Jerry"} 
	],
edges:[//边
		{ source:0,target:1,weight:1,color:1},
		{ source:0,target:2,weight:3,color:4},
		{ source:0,target:3,weight:4,color:6},
		{ source:0,target:4,weight:6,color:65},
		{ source:1,target:5,weight:3,color:76},
		{ source:2,target:5,weight:8,color:879},
		{ source:2,target:5,weight:7,color:989},
		{ source:3,target:4,weight:9,color:643},
		{ source:5,target:8,weight:1,color:54},
		{ source:5,target:9,weight:3,color:54}, 
		{ source:6,target:7,weight:4,color:45},
		{ source:7,target:8,weight:0,color:43},
		{ source:2,target:8,weight:8,color:243},
		{ source:3,target:8,weight:1,color:43},
		{ source:5,target:8,weight:5,color:13},
		{ source:6,target:8,weight:3,color:351},
		{ source:8,target:9,weight:4,color:1}
	]
};
		//(2)转化数据为适合生成力导向图的对象数组
		var force=d3.layout.force()
					.nodes(dataset.nodes)//加载节点数据
					.links(dataset.edges)//加载边数据
					.size([w,h])//设置有效空间的大小
					.linkDistance(50)//连线的长度
					.charge(-200)//负电荷量,相互排斥设置的负值越大越排斥
					.start();//设置生效
		var svg=d3.select("body")
				.append("svg")
				.attr("width",w)
				.attr("height",h);
//(3)创建作为连线的svg直线
		var edges=svg.selectAll("line")
.data(dataset.edges)
.enter()
.append("line")
.style("stroke",function(d){//	设置线的颜色
	return colors(d.color);
})
.style("stroke-width",function(d,i){//设置线的宽度
	return d.weight;
});
//(4) 创建作为连线的svg圆形
var nodes=svg.selectAll("circle")
.data(dataset.nodes)
.enter()
.append("circle")
.attr("r",function(d){//设置圆点的半径,圆点的度越大weight属性值越大,可以对其做一点数学变换
	return Math.log(d.weight)*10;
})
.style("fill",function(d){
	return colors(d.weight*d.weight*d.weight);
})
.call(force.drag);//可以拖动

 //(5)打点更新,没有的话就显示不出来了
force.on("tick",function(){
	edges.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;
	});
//(6)设置节点坐标,节点先生成再确定坐标的
nodes.attr("cx",function(d){//节点有坐标属性
		return d.x;
	})
	.attr("cy",function(d){
		return d.y;
	});
	
})
		</script>

	</body>
</html>


 

你可能感兴趣的:(d3,d3.js,D3JS)