首页 > 代码库 > 【 D3.js 入门系列 --- 5.1 】 做一个带坐标轴和标签的图表
【 D3.js 入门系列 --- 5.1 】 做一个带坐标轴和标签的图表
前面几节讲解了图标、坐标轴、比例等等，这一节整合这些内容做一个实用的图表。结果图如下：
代码如下所示：
[html] view plain copy
<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 行： 绘制坐标轴
注意：绘制的时候，要注意绘制的顺序，否则可能会把某些需要的东西覆盖掉。尤其是坐标轴，最好放到最后绘制。
本文来自：
博客为： www.ourd3js.com
csdn博客为： blog.csdn.net/lzhlzz
转载请注明出处，谢谢。
【 D3.js 入门系列 --- 5.1 】 做一个带坐标轴和标签的图表
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。