【 D3.js 入门系列 --- 5.1 】做一个带坐标轴和标签的图表

来源：互联网发布：在线视频录像软件编辑：程序博客网时间：2024/05/29 02:16

本人的个人博客为： 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://d3js.org/d3.v3.min.js" charset="utf-8"></script>          <script>var width = 600;var height = 600;var dataset = [];var num = 15;  //数组的数量for(var i = 0; i < num ; i++){var tempnum = Math.floor( Math.random() * 50 );   // 返回 0~49 整数dataset.push(tempnum);}var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);var xAxisScale = d3.scale.ordinal().domain(d3.range(dataset.length)).rangeRoundBands([0,500]);var yAxisScale = d3.scale.linear().domain([0,d3.max(dataset)]).range([500,0]);var xAxis = d3.svg.axis().scale(xAxisScale).orient("bottom");var yAxis = d3.svg.axis().scale(yAxisScale).orient("left");var xScale = d3.scale.ordinal().domain(d3.range(dataset.length)).rangeRoundBands([0,500],0.05);var yScale = d3.scale.linear().domain([0,d3.max(dataset)]).range([0,500]);svg.selectAll("rect")   .data(dataset)   .enter()   .append("rect")   .attr("x", function(d,i){return 30 + xScale(i);   } )   .attr("y",function(d,i){return 50 + 500 - yScale(d) ;   })   .attr("width", function(d,i){return xScale.rangeBand();   })   .attr("height",yScale)   .attr("fill","red");   svg.selectAll("text")            .data(dataset)            .enter().append("text")            .attr("x", function(d,i){return 30 + xScale(i);   } )   .attr("y",function(d,i){return 50 + 500 - yScale(d) ;   })            .attr("dx", function(d,i){return xScale.rangeBand()/3;   })            .attr("dy", 15).attr("text-anchor", "begin").attr("font-size", 14).attr("fill","white")            .text(function(d,i){return d;});   svg.append("g").attr("class","axis").attr("transform","translate(30,550)").call(xAxis);svg.append("g").attr("class","axis").attr("transform","translate(30,50)").call(yAxis);           </script>      </body>  </html>

下面分别讲解上面的代码：

31 - 34 行：随机生成数据，赋于数组
36 - 38 行：定义 svg
40 - 54 行：定义坐标轴的 scale （比例）和坐标轴，48行为 x 轴，52行为 y 轴
56 - 62 行：定义柱形图的 scale
64 - 78 行：绘制柱形图，注意 scale 的使用
80 - 98 行：绘制文字标签，同样注意 scale
100 - 108 行：绘制坐标轴

注意：绘制的时候，要注意绘制的顺序，否则可能会把某些需要的东西覆盖掉。尤其是坐标轴，最好放到最后绘制。

13 0

【 D3.js 入门系列 --- 5.1 】 做一个带坐标轴和标签的图表

【 D3.js 入门系列 --- 5.1 】做一个带坐标轴和标签的图表