您的位置：首页 > 其它

D3学习：力导向图布局

2015-12-26 11:19 323 查看

今天一早上起来复习了会儿算法的NPC证明，好烧脑，本宝宝现在都有点而力不从心了~

到图书馆学D3，雷打不动，即使有考试也不放弃码代码~~

力导向图，之前学过一个比较复杂的，那时候按照一个demo写完了累的本宝宝半死也没怎么理解其中内涵，这回再看，感觉好多了，还是得循序渐进啊~

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>力导向图</title>
<script type="text/javascript" src="../d3/d3.min.js"></script>
</head>

<body>
<script type="text/javascript">
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}];
var width = 400,
height = 400;

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(150)//指定连线长度
.charge([-300]);//指定相互之间的作用力
//负电荷数
//上面的语句定义了力布局方式
//并用力布局的方式使得原始数据变成了画力导向图
//所需要的数据格式

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

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

//看控制台输出的数据，已经发生了变化

var color = d3.scale.category20();

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

//添加连线
var svg_edges = svg.selectAll("line")
.data(edges)
.enter()
.append("line")
.attr("stroke","#ccc")
.attr("stroke-width",1);
//添加文字
var svg_texts = svg.selectAll("text")
.data(nodes)
.enter()
.append("text")
.attr("fill","orange")
.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;});
})

//tick：滴答滴答，鼠标触发事件

</script>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航