昨天,项目经理突然给我说甲方那边想做个云图,叫我上网上找找方法。作为标准的程序猿宅男表示,云图是什么鬼?于是就开始和度娘的亲密接触,发现有一种框架可以实现这种功能,那就是d3.js。这是我第二次听说这个框架了,上一次听说还是面试的时候那面试官考我的问题,接下来就开始寻找d3js教程开始苦苦的学习之旅,经过昨天一天的学习,突然发现平常用几行js代码才能写出来的东西用d3js一行就可以解决,简直简单到爆,好了,话不多说,进入正文吧。
首先下载个d3.js源文件,就跟下载jq一样,没有的话直接上官网下载https://d3js.org/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>d3</title>
<script src="d3.min.js"></script>
</head>
<body>
<p>hello world</p>
<p>hello world</p>
<h2>hello world</h2>
<script>
d3.select("body").selectAll("p").text("www.ourd3js.com");//d3.select()是选择所有指定元素的第一个。d3.selectAll()
var p = d3.select("body").selectAll("p").text("www.ourd3js.com");
//修改段落的颜色和字体大下
p.style("color","red").style("font-size","34px");
</script>
</body>
</html>
怎么样,简单吧~~而且对于熟练使用jq的我来说简直亲切到爆有木有~~如果大家还想了解更多可以去极客学院写的那个d3手册里看,非常基础和简单易学,当然我由于最近很忙,可能不会按时更新啦,下面就把传送门附上。
http://wiki.jikexueyuan.com/project/d3wiki/selection.html