您的位置：首页 > Web前端 > JavaScript

d3js关于力导向图

2016-04-25 00:00 260 查看

关于d3js的力导向图说明

<html>
<head>
<meta charset="utf-8">
<title>力导向图</title>
</head>

<style>

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>

var nodes = [ { name: "桂林"    }, { name: "广州" },
{ name: "厦门"    }, { name: "杭州"   },
{ name: "上海"   }, { name: "青岛"    },
{ name: "天津"    } ];

var edges = [  { source : 0  , target: 1 } , { source : 0  , target: 2 } ,
{ source : 0  , target: 3 } , { source : 1  , target: 4 } ,
{ source : 1  , target: 5 } , { source : 1  , target: 6 }  ];

//其中nodes表示的是结点nodes，表示图中的所有的点，edges表示的是边，在d3js中用数组表示，其中source:target表示的是两个点的连线。比如source:0,target:1表示的就是
//桂林到广州的连线。如此类推。

var width = 1200;
var height = 500;

var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);

var force = d3.layout.force()
.nodes(nodes)        //指定节点数组
.links(edges)        //指定连线数组
.size([width,height])    //指定范围
.linkDistance(200)    //指定连线长度
.charge(-500);    //相互之间的作用力

force.start();    //开始作用

console.log(nodes);
console.log(edges);

//添加连线
var svg_edges = svg.selectAll("line")
.data(edges)
.enter()
.append("line")
.style("stroke","#ccc")
.style("stroke-width",1);

var color = d3.scale.category20();

//添加节点
var svg_nodes = svg.selectAll("circle")
.data(nodes)
.enter()
.append("circle")
.attr("r",20)
.style("fill",function(d,i){
return color(i);
})
.call(force.drag);    //使得节点能够拖动

//添加描述节点的文字
var svg_texts = svg.selectAll("text")
.data(nodes)
.enter()
.append("text")
.style("fill", "black")
.attr("dx", 20)
.attr("dy", 8)
.text(function(d){
return d.name;
});

force.on("tick", function(){    //对于每一个时间间隔

//更新连线坐标
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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航