使用D3绘制图表(3)--添加坐标轴和文本标签
2016-06-17 10:46
302 查看
上一篇是曲线的绘制,这样仅仅只是有一条线,完全先是不出数据想要表现的内容,于是我们要添加坐标系,添加坐标系和画线类似。
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样式文件,主要是domain和tick样式的添加
#container { width: 500px; height: 250px; background-color: #ccc; margin: 0 auto; margin-top: 100px; } path{ fill: none; stroke: cornflowerblue; stroke-width: 2px; } .domain,.tick line { stroke: gray; stroke-width: 1px; }
3.完成功能的js代码
var width = 500, height = 250, margin = {left:50, top:30, right:20,bottom:20}, g_width = width - margin.left - margin.right, g_height = height - margin.top - margin.bottom; //获取div,向里面添加svg var svg = d3.select("#container") .append("svg:svg")//在“container”中插入svg .attr("width", width)//设置svg的宽度 .attr("height", height)//设置svg的高度 //添加g元素 var g = d3.select("svg") .append("g") .attr("transform","translate("+margin.left+","+margin.top+")") var data = [0,1,3,5,9,4,2,3,6,8]//定义一个数组,里面放置了一些任意数字 var scale_x = d3.scale.linear()//把曲线沿x轴按比例放大 .domain([0, data.length-1]) .range([0, g_width]) var scale_y = d3.scale.linear()//把曲线沿y轴按比例放大 .domain([0, d3.max(data)]) .range([g_height,0])//使y轴按照数学中的方式显示,而不是浏览器的格式 var line_generator = d3.svg.line()//d3中绘制曲线的函数 .x(function(d, i){return scale_x(i);})//曲线中x的值 .y(function(d){return scale_y(d);})//曲线中y的值 .interpolate("cardinal")//把曲线设置光滑 d3.select("g") .append("path") .attr("d", line_generator(data)) var x_axis = d3.svg.axis().scale(scale_x), y_axis = d3.svg.axis().scale(scale_y).orient("left") g.append("g") .call(x_axis) .attr("transform","translate(0,"+g_height+")") g.append("g") .call(y_axis) .append("text") .text("price(¥)") .attr("transform","rotate(-90)")//text旋转-90° .attr("text-anchor","end")//字体尾部对齐 .attr("dy","1em")//沿y轴平移一个字体的大小
4.完成后的样式
相关文章推荐
- 升级wordpress后,无法使用添加媒体,标签,可视化/文本等功能的解决方法
- 图形的绘制,如何使用自定义画笔(颜色,线宽,线形)。如何为程序中添加选项菜单和选项设置对话框,如何使用标准颜色对话框,如何使用字体对话框,在选项对话框中实现预览功能。实现选项对话框和窗口类中的数据交换。如何改变对话框和控件的背景色,如何改变控件的文本颜色,
- 使用D3绘制图表(5)--水平柱状图表
- 使用D3绘制图表(7)--饼状图
- 使用D3绘制图表(4)--面积图表
- 使用D3绘制图表(6)--竖直柱状图表
- 使用dom4j解析xml标签,将标签属性与文本内容添加进集合
- 使用python matplotlib绘制高级图表
- Java绘图: 使用Graphics类绘制线段、矩形、椭圆/圆弧/扇形、图片、文本
- 多iframe使用tab标签方式添加、删除、切换的处理实例
- Android中View绘制优化二一---- 使用<include />标签复用布局文件
- 使用D3制作统计图表、线性图表、水平柱状图表、饼图 -- (一)线性图表
- 绘制标准的d3图表
- 关于文本标签的使用
- 使用Office2000中的图表控件绘制图形~
- Qt绘图 使用QWT绘制科学图表、绘图
- 使用CHyperLink类为静态文本添加超链接的方法
- Highmaps网页图表教程之数据标签与标签文本
- HTML语言基础之——使用标签制作文本内容(1)