D3学习：力导向图布局
今天一早上起来复习了会儿算法的NPC证明，好烧脑，本宝宝现在都有点而力不从心了~
到图书馆学D3，雷打不动，即使有考试也不放弃码代码~~
力导向图，之前学过一个比较复杂的，那时候按照一个demo写完了累的本宝宝半死也没怎么理解其中内涵，这回再看，感觉好多了，还是得循序渐进啊~
<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>