首页 > 代码库 > [5.1] D3.js中整合坐标轴 - 图表 - 文字标签
[5.1] D3.js中整合坐标轴 - 图表 - 文字标签
本人的个人博客为： www.ourd3js.com
csdn博客为： blog.csdn.net/lzhlzz
转载请注明出处，谢谢。
前面几节讲解了图标、坐标轴、比例等等，这一节整合这些内容做一个实用的图表。结果图如下：
代码如下所示：
<html>
<head>
<meta charset="utf-8">
<title>Chart</title>
</head>
<style>
.axis path,
.axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
<body>
<script src=http://www.mamicode.com/"http://d3js.org/d3.v3.min.js" charset="utf-8"></script> >
下面分别讲解上面的代码：- 31 - 34 行： 随机生成数据，赋于数组
- 36 - 38 行： 定义 svg
- 40 - 54 行： 定义坐标轴的 scale （比例）和坐标轴，48行为 x 轴，52行为 y 轴
- 56 - 62 行： 定义柱形图的 scale
- 64 - 78 行： 绘制柱形图，注意 scale 的使用
- 80 - 98 行： 绘制文字标签，同样注意 scale
- 100 - 108 行： 绘制坐标轴
注意：绘制的时候，要注意绘制的顺序，否则可能会把某些需要的东西覆盖掉。尤其是坐标轴，最好放到最后绘制。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。