力导向算法：
力导向算法是指通过对每个节点的计算，算出引力和排斥力综合
的合力，再由此合力来移动节点的位置
对适用于一般网状结构数据绘图的算法来说，力导向算法是一种常被应用的
方法。通过对每个节点的计算，算出引力和排斥力综合的合力，再由此合力
来移动节点的位置。执行一次后根据节点新位置算出新的能量值，
如同力学概念，能量值越小，表示整个网络越趋于稳定。一般来说能量值越小，网络图的配置显示就会越清晰，因此当能量值到达最小值的时候，网状图的配置状态就是我们想要的结果。
特性：
这种方法的缺点是不收敛，总是有节点在两个不同位置上来回振动，虽然不会收敛，但是来回振动时的配置通常也最终可达到某种稳定的状态，因此实际的执行都以指定执行的次数来决定停止的条件。另外一个问题就是网状图的节点数太多时，也无法求得令人满意的结果。
当开始配置不好的情况下，通常是力导向算法的配置结果也不是很好，所以使用力导向算法通常会配合一个初始配置的算法，以达成较满意的网状配置。
多级算法(multilevel algorithm)最重要的是代表节点的选择，这样就会直接影响到执行效率和结果。
力导向算法的想法很简单，且容易使用和修改以满足需求。
我们可更改网状图的初始位置以加快收敛，也可根据不同的要求加入不同种类的力，另外，算法过程中虽然没有特别针对网状图的对称性进行配置，但是当网状图中存在对称关系时也能获得较好的结果。力导向算法的缺陷是在初始配置不佳的时候所得到的网状图也不会很好，所以可根据网状数据的特性是否选择该算法。
网状图：
网状统计图一般由三组斜线组成，各组分别代表一种事物，即用一个三角形网状图表示某个对象在三个方面的分布情况。
网状统计图一般由三组斜线组成，各组分别代表一种事物。从各自
的顶端向下面走，分布率就从100%向下降。即用一个三角形网状表示某个对象在三个方面的分布情况。图中没有明确的数据，只有一些字母，这些字母代表的意义一定要弄清楚，因为在题目的具体选项中可能会脱离字母，如果不能正确对应，就会失分。网状图表面上看很复杂，但是它没有复杂计算，只要掌握其特点，很容易就会得出答案
雷达图：
对每个指标，一般是取点越靠外数值越大，越靠里越小，比如要在0-100之间取值，如果是6个标准点把"半径"分成5段，那从"中心"到最外面的端点，取值依次是0，20，40，60，80，100如果是在80和100的中间来一下，那就是90无论什么数据图，其图都是由标点组成的，所以标杆就是关键，如坐标图的坐标，饼图的扇面角
网状数据：
网状结构是信息集合中一个重要结构形式，从图论的角度来看结点的网状关系组成一个图.网状结构是信息集合中一个重要结构形式，从图论的角度来看结点的网状关系组成一个"图"一个无向图是一个有序的二元组<V，E>，记作G。其中，
Ø V≠Φ称为G的顶点集，其元素称为顶点或节点。
Ø E称为边集，它是无序集V×V的多重子集，其元素称为有
向边，简称边。
网状数据存在各种领域中，被用于表示各种事物间的关系，如正改变着人们生活方式的互联网、描述对象关系的UML类图、生物学中表示物种演化的演化图、集成电路的网络图和人际关系网络图等，共同特点就是表达的数据量大、关系复杂、传统的数据分析工具无法直观发现内在规律和信息。
力导向:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D3直方图</title>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script><!--d3.js是js的一个库，不需要安装，可直接下载文件或在有网络的情况下直接引用-->
<script>
/*屏幕分辨率*/
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
w=w*0.98;
h=h*0.9;
var color=d3.scale.category20();/*定义颜色，category20()表示有20种颜色*/
var force=d3.layout.force()/*定义力导向*/
.charge(-120)/*力导向布局的电荷为-120*/
.linkDistance(100)/*连接距离为100*/
.size([w,h]);/*定义数组[w,h]表示大小宽高，这里的宽和高是屏幕的宽和高*/
var svg=d3.select("body")/*定义svg画布绘制力导向图形，selectAll选择页面的body部分*/
.append("svg")/*添加svg*/
.attr("width",w)
.attr("height",h);/*画布的宽和高*/
d3.json("a.json",function(error,graph){/*导入a.json文件，（这个文件和本文件在相同目录下），读为graph*/
console.log(graph);/*在控制台可以查看是否读入成功和读入的信息*/
force.nodes(graph.nodes)/*将信息绑定到力导向中，点来源于读入的graph.nodes*/
.links(graph.links)/*边来源于读入的graph.links*/
.start();
var node=svg.selectAll(".node")/*定义每个节点的属性，来源于每个为.node的节点*/
.data(graph.nodes)/*用data绑定数据graph.nodes*/
.enter()/*用enter()进入每一个元素*/
.append("circle")/*添加append,绘制成圆*/
.attr("class","node")/*类型class为node*/
.attr("r",15)
.attr("cx",200)
.attr("cy",200)
.style("fill","yellow")
.call(force.drag);
var link=svg.selectAll(".link")
.data(graph.links)
.enter()
.append("line")
.attr("class","link")
.style("stroke-width",3)
.style("stroke","green");
force.on("tick",function(){/*刷新方法有三种：start:开始时刷新,end:结束时刷新,tick:每时每刻刷新*/
link.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;});
node.attr("cx",function(d){return d.x;})
.attr("cy",function(d){return d.y;});
})
});
</script>
</body>
</html>
其中a.json文件内容为：
{"nodes":
[
{"name":"@","group":0},
{"name":"a","group":1},
{"name":"b","group":2}
],
"links":
[
{"source":0,"target":1,"value":1},
{"source":1,"target":2,"value":1},
{"source":2,"target":0,"value":1}
]
}
控制台信息：
结果：
原生数据饼图：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>D3直方图</title>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script><!--d3.js是js的一个库，不需要安装，可直接下载文件或在有网络的情况下直接引用-->
<script>
/*屏幕分辨率*/
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
w=w*0.98;
h=h*0.9;
/*选择body,添加svg*/
var svg=d3.select("body")
.append("svg")
.attr("width",w)
.attr("height",h);
var dataset=[["第一产业",90],["第二产业",80],["第三产业",50]];
var pie=d3.layout.pie()
.value(function(d){
return d[1];
});
var piedata=pie(dataset);
console.log(piedata);
var arc=d3.svg.arc()/*弧的路径,d3提供换算方法,arc负责把路径的起止角度换算成参数*/
.innerRadius(80)
.outerRadius(200);
/*添加path路径,*/
/*现在要绑定一组数据*/
svg.selectAll("path")
.data(piedata)/*绑定的数据*/
.enter()/*装入数据*/
.append("path")/*此处添加了几个path由dataset决定*/
.attr("d",function(d){/*这里的d是.data(dataset)的d*/
console.log(arc(d));
return arc(d);/*绑定了几个元素就返回几个d*/
})
.attr("fill","yellow")/*填充颜色*/
.attr("stroke","green")/*添加边线*/
.attr("transform","translate("+(w/2)+","+(h/2)+")")/*把弧的圆心平移到（400。200）这个点*/
.on("mouseover",function(d){
d3.select(this)
.attr("fill","pink");
})
.on("mouseout",function(d){
d3.select(this)
.attr("fill","yellow");
});
svg.selectAll("text")
.data(piedata)
.enter()
.append("text")
.attr("text-anchor","middle")
.attr("transform",function(d){
var x=arc.centroid(d)[0];
var y=arc.centroid(d)[1];
return "translate("+(w/2+x)+","+(h/2+y)+")";
})
.text(function(d){
return d.value;
});
</script>
</body>
</html>
602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
