首页 > 代码库 > [5.1] D3.js中整合坐标轴 - 图表 - 文字标签

[5.1] D3.js中整合坐标轴 - 图表 - 文字标签

2024-07-09 15:39:45   223人阅读

    本人的个人博客为： 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 行： 绘制坐标轴
    注意：绘制的时候，要注意绘制的顺序，否则可能会把某些需要的东西覆盖掉。尤其是坐标轴，最好放到最后绘制。


联系
我们