Home » Code » d3.js简单画图–箭头连接随机圆圈

d3.js简单画图–箭头连接随机圆圈

d3-path-connect-circles

DEMO

d3.js是前端数据可视化的利器,可以绘制各种报表图形,如饼状图、条形图、散点图、坐标轴、力引导图、填充树等你听过或者没听过的高大上图表。当然目前也有很多封装好的js库可以简单的画出这些图表,如ECharts等。但最近我想要的一个图形这些成熟的框架却没见提供,或许是我不知道也说不定。

我想要随机分布一些圆圈,再用箭头连接起来,有点像流程图,很基本的图形,找了又找,都没有结果。最终决定,还是学一下d3自己画吧。国内相关的教程比较少,还好有大神在csdn上发有比较完整的教程(地址点我),在此非常感谢这位大神奉献的教程,今年1月份ta最近发起了翻译官方文档的活动,相信不久的将来即将有中文文档面世。

画图如果不用d3自身的布局(layout),都要知道坐标才能确定一个图形。从数据库取出的数据json化后肯定没有相应坐标,需要为每个元素生成随机坐标,再按步骤画即可。画图需要一些svg的知识,现查现学。下面是所有代码。

<!docid html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>d3.js</title>
	<style type="text/css">
	#draw{margin:0 auto;width:400px;height:1200px;}
	svg{border:1px solid red;}	
	</style>
	<script id="text/javascript" src="d3.js"></script>
</head>
<body>
	<div id="draw"></div>	
</body>
</html>
<script id="text/javascript">
	var dataset=[
		 {source: "html1", target: "html2", id: "1"},  
		 {source: "html2", target: "html3", id: "2"},  
		 {source: "html3", target: "html5", id: "3"},  
		 {source: "html5", target: "css2", id: "4"},  
		 {source: "css2", target: "css3", id: "5"},  
		 {source: "css3", target: "javascript", id: "6"},  
		 {source: "javascript", target: "c#", id: "7"},  
		 {source: "c#", target: "php", id: "8"},  
		 {source: "php", target: "c++", id: "9"},  
		 {source: "c++", target: "c", id: "10"},  
		 {source: "c", target: "HTC", id: "11"}
	];
	var w = 400;
	var h = 1200;
	var rang_y = 50;//纵坐标浮动量(0~50)
	var rang_x = 200;//横坐标浮动量(0~200)
	var tolerance = 100;//纵坐标递增公差
	var r = 20;//半径	
	var count = dataset.length;
	var offset = [];
	for(var i = 0; i<count; i++){
		offset.push({x:Math.round(Math.random()*rang_x),y:Math.round(Math.random()*rang_y)});
	}
	var svg = d3.select("#draw")
		.append("svg")
		.attr("width", w)
		.attr("height", h);
	svg.append('svg:defs').append('svg:marker')
        .attr('id', 'end-arrow')
        .attr('viewBox', '0 -5 10 10')
        .attr('refX', 10)
        .attr('markerWidth', 6)//箭头参数适当按需调整
        .attr('markerHeight', 10)
        .attr('orient', 'auto')
        .append('svg:path')
        .attr('d', 'M0,-5L10,0L0,5')//绘制箭头形状
        .attr('fill', 'blue');
	var elemEnter = svg.selectAll("g")
		.data(dataset)
		.enter()
		.append("g")
		.attr("transform", function(d,i){
			return "translate("+(w/2-rang_x/2+offset[i].x)+","+(tolerance*i+25+offset[i].y)+")";
		})
		.on("click",function(){
			alert(this.childNodes[1].firstChild.nodeValue);
		});	
	elemEnter.append("circle")
		.attr("r", r)
		.attr("stroke","#339933")
		.attr("fill", "#339933")
		.attr("id", function(d){
			return d.id;
		});			
	elemEnter.append("text")
		.attr("text-anchor", "middle")
		.attr("dy","0.34em")
		.text(function(d){return d.source});
	elemEnter.append("path")				
		.attr("d", function(d, i){
			if(i<count-1){
				return 'M0 20 L'+(offset[i+1].x-offset[i].x)+' '+(offset[i+1].y-offset[i].y+tolerance-r);
			}
		})
		.attr("marker-end", "url(#end-arrow)")
		.style({
			fill:'none',
			stroke:'blue',
			'stroke-width':2
		});
</script>

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Time limit is exhausted. Please reload CAPTCHA.