使用D3绘制图表可以使数据更加直观。
使用D3前要先加载D3库，这里有两种方式，一种是在线加载<script type="text/javascript" src="http://d3js.org/d3.v3.js" ></script>,另一种是下载D3库，我是直接在百度里面搜索”D3 js 下载“然后下载的，下载后放入项目中，然后引入到html页面里面就可以了。这里声明一下，大部分时候我们都把引入js文件的语句放在页面的最下面，这是因为js中的一些方法要使用html里面的一些内容，把js文件的引入放在最后面就不会出错。
1.html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="container"></div>
</body>
<script type="text/javascript" src="js/d3.js" ></script>
<script type="text/javascript" src="js/index.js" ></script>
</html>
2.css样式
#container {
width: 500px;
height: 250px;
background-color: #ccc;
margin: 0 auto;
margin-top: 100px;
}
3.index.js代码（画布的绘制在这里面完成，这里使用了D3库，所以这个js文件的引入在d3下面）
//获取div，向里面添加svg
var svg = d3.select("#container")
.append("svg:svg")//在“container”中插入svg
.attr("width", 500)//设置svg的宽度
.attr("height", 250)//设置svg的高度
//添加g元素
d3.select("svg")//使用“select”函数选择svg
.append("g")//在svg中插入g
.attr("transform","translate(50,25)")//设置g的偏移量
上面是在开发者模式下的截图，我们可以看到svg和g都被添加到了div里面，这样画布的绘制就完成了。大家在学习和练习是要多使用浏览器的开发者模式，这样很方便修改。
时间： 2024-10-10 14:43:19