码迷,mamicode.com
首页 > Web开发 > 详细

d3js V4 力导向图

时间:2018-01-22 13:00:55      阅读:940      评论:0      收藏:0      [点我收藏+]

标签:drag   tar   htm   selectall   null   pos   meta   .text   targe   

参考馒头华华:http://d3.decembercafe.org/pages/lessons/14.html  与 tengxing007    :http://blog.csdn.net/tengxing007/article/details/59712572

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>力导向图</title>
</head>
<body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>
		var nodes = [ { name: "BeiJing"    }, { name: "XiaMen" },
                          { name: "XiAn"    }, { name: "HangZhou"   },
                          { name: "ShangHai"   }, { name: "QingDao"    },
                          { name: "NanJing"    } ];
                         
            var links = [  { source : 0  , target: 1 } , { source : 0  , target: 2 } ,
                           { source : 0  , target: 3 } , { source : 1  , target: 4 } ,
                           { source : 1  , target: 5 } , { source : 1  , target: 6 }  ];    
            
            var width = 800;
            var height = 600;
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width",width)
                        .attr("height",height);
            
            // 通过布局来转换数据,然后进行绘制
            var simulation = d3.forceSimulation(nodes)
                  .force("link", d3.forceLink(links).distance(100))
                  .force("charge",d3.forceManyBody())
                  .force("center",d3.forceCenter(width/2, height/2));
    
			simulation
				  .nodes(nodes)
				  .on("tick", ticked);

			  simulation.force("link")
				  .links(links);
            var color = d3.scaleOrdinal(d3.schemeCategory20);  
            // 绘制
            var svg_links = svg.selectAll("line")
                .data(links)
                .enter()
                .append("line")
                .style("stroke","#ccc")
                .style("stroke-width",3)
				.call(d3.zoom()
					.scaleExtent([-5, 2])
				);
		
			   var svg_nodes = svg.selectAll("circle")
				.data(nodes)
				.enter()
				.append("circle")
				  .attr("cx", function(d) { return d.x; })
				  .attr("cy", function(d) { return d.y; })
				  .attr("r", ‘20‘)
				  .attr("fill", function(d,i){
                    return color(i);
                }).call(d3.drag().on("start", dragstarted)
					  .on("drag", dragged)
					  .on("end", dragended));
					  console.log(nodes);
				 //添加描述节点的文字
				 var svg_texts = svg.selectAll("text")
					 .data(nodes)
					 .enter()
					 .append("text")
					 .style("fill", "black")
					 .attr("dx", 20)
					 .attr("dy", 8)
					 .text(function(d){
						console.log(d);
						return d.name;
					 });
			   function dragstarted(d) {
				  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
				  d.fx = d.x;
				  d.fy = d.y;
				}

				function dragged(d) {
				  d.fx = d3.event.x;
				  d.fy = d3.event.y;
				}

				function dragended(d) {
				  if (!d3.event.active) simulation.alphaTarget(0);
				  d.fx = null;
				  d.fy = null;
				}
				function ticked() {
					svg_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; });

					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>

  

d3js V4 力导向图

标签:drag   tar   htm   selectall   null   pos   meta   .text   targe   

原文地址:https://www.cnblogs.com/cocozj945/p/8328289.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!