[D3. js - 빅 데이터 시각 화 - 지식 그래프 가이드 맵 / 인력 그래프] 데이터 전시

	
	
	



	
		let data={
			'nodes':[
				{'food':'   '},
				{'food':'  '},
				{'food':'   '},
				{'food':'  '},
				{'food':'  '},
				{'food':'  '},
				{'food':'  '},
				{'food':'  '}
			],

			'links':[
				{source:0,target:1},
				{source:0,target:2},
				{source:0,target:3},
				{source:0,target:4},
				{source:0,target:5},
				{source:0,target:6},
				{source:0,target:7}
			]
		};
		
		let nodes = data.nodes;
		let links = data.links;
		
		let width = 800;
		let height = 800;
		
		let svg = d3.select('body')
		.append('svg')
		.attr('width',width)
		.attr('height',height);
		
		let force = d3.layout.force()
		.nodes(nodes) //      
		.links(links) //      
		.size([width,height]) //        
		.linkDistance(300) //         
		.distance(280)
		.charge(-1500); //         

		force.start(); //      
		
		
	//	         ， d3  
		let color = d3.scale.category20(); //20      20      
		
	//	      
		//	          
		let linksLine = svg.selectAll('line')
		.data(links)
		.enter()
		.append('line')
		.style('stroke','#ccc')
		.style('stroke-width',2);
		
	//	    
		let nodesCic = svg.selectAll('circle')
		.data(nodes)
		.enter()
		.append('circle')
		.attr('r',25)
		.style('fill',function(d,i){
			return color(i); //        ，            
		})
		.call(force.drag); //  drag  ，        
		
	//	       
		let nodesTitle = svg.selectAll('text')
		.data(nodes)
		.enter()
		.append('text')
		.style('fill','#fff')
		.attr("text-anchor", "middle") //            
		// .attr('dx',20) //      x  
		// .attr('dy',5) //      y  
		.text(function(d){
			return d.food;
		});
		
		force.on('tick',tick);
		
		function tick(){
			//	       
			linksLine.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;});
			
		//	      
			nodesCic.attr('cx',function(d){return d.x;})
			.attr('cy',function(d){return d.y});
			
		//	      
			nodesTitle.attr('x',function(d){return d.x})
			.attr('y',function(d){return d.y + 5});
		
		}