【d 3.jsチュートリアル06】force力ガイド図


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.good{
				font-size: 10px;
			}
		</style>
		<script src="js/d3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<svg></svg>
		
		<script type="text/javascript">
			var width=500;
			var height= 500;
			var svg = d3.select("svg");
				svg.attr("x",300)
					.attr("y",300)
					.attr("width",1000)
					.attr("height",1000);
					
			var nodes = [ { name: "  " }, { name: "  " },   
			              { name: "  " }, { name: "  " },
			              { name: "  " }, { name: "  " },
			              { name: "  " } ];
 
 			var edges = [ { source : 0 , target: 1 } , { source : 0 , target: 2 } ,   //   ,source target      
			               { source : 0 , target: 3 } , { source : 1 , target: 4 } ,
			               { source : 1 , target: 5 } , { source : 1 , target: 6 } ];
			/*   force*/			               
            var force = d3.layout.force()
            			.nodes(nodes)
            			.links(edges)
            			.size([300,300])     //               
            			.linkDistance(100)   //     
            			.charge([-100]);     //           
            /*      force*/
            force.start();
            /*    */
           var svg_edges = svg.selectAll("line")
           					.data(edges)
           					.enter()
           					.append("line")
           					.attr("dx",function(d,i){
          						return i*20;
          					})
          					.attr("dy",function(d,i){
          						return i*30;
          					})
           					.style("stroke","#ccc")  //     
           					.style("stroke-width",1);//     
           	/*  */
           var color = d3.scale.category20();
           /*    */
          var svg_nodes = svg.selectAll("circle")
          					.data(nodes)
          					.enter()
          					.append("circle")
          					.attr("cx",function(d,i){
          						return i*20;
          					})
          					.attr("cy",function(d,i){
          						return i*30;
          					})
          					.attr("r",20)
          					.style("fill",function(d,i){
          						return color(i);
          					})
          					.call(force.drag);
          					//  drag         
           /*         */
          var svg_texts = svg.selectAll("text")
          					.data(nodes)
          					.enter()
          					.append("text")
          					.attr("class","good")
          					.style("fill","black")
          					.attr("dx",-10)               //    node     
          					.attr("dy",10)				  
          					.text(function(d,i){         //       
          						return d.name;
          					})
          					.style("fill","white");
          					
          	
        force.on("tick", function(){ //                force  
				    //      
				    svg_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; });
				 
				    //      
				    svg_nodes.attr("cx",function(d){ return d.x; })
				        .attr("cy",function(d){ return d.y; });
				
				    //      
				    svg_texts.attr("x", function(d){ return d.x; })
				       .attr("y", function(d){ return d.y; });
		});
		</script>
	</body>
</html>