原文: http://blog.csdn.net/u013147600/article/details/46437703
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8" %> <%@ include file="/pages/comm/taglibs.jsp" %> <%@ page import="com.pandy.framework.base.utils.ProjectUtil" %> <%@ page import="com.pandy.framework.base.utils.WebUtils" %> <% String baseServerUrl = WebUtils.getBaseServerURL(request); String contextPath = WebUtils.getContextPath(request); // http://192.168.0.222:8082/test/d3.do %> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>D3学习</title> <!-- page specific plugin styles --> <style type="text/css"> .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } </style> <script type="text/javascript"> var baseServerUrl = "<%=baseServerUrl%>"; </script> <script type="text/javascript" src='<c:url value="/script/plugins/jquery-2.0.3.min.js"/>?pv=<%=ProjectUtil.getBuildTime()%>'></script> <script type="text/javascript" src='<c:url value="/script/plugins/d3/d3.v3.min.js"/>?pv=<%=ProjectUtil.getBuildTime()%>'></script> </head> <body> <script type="text/javascript"> //定义变量 var width =600; var height=600; var dataset = [ [5, 20], [480, 90], [250, 50], [100, 33], [330, 95], [410, 12], [475, 44], [25, 67], [85, 21], [220, 88], [600, 150] ]; var padding=30; //得到X轴和Y轴的尺度函数 var xScale = d3.scale.linear() .domain([0,d3.max(dataset,function(d) { return d[0]; }) ]) .range([padding,width-padding*2]); var yScale = d3.scale.linear() .domain([0,d3.max(dataset,function(d) { return d[1]; }) ]) .range([height-padding,padding]); //这个顺序，导致尺度反转 var svg = d3.select("body") .append("svg") .attr("width",width) .attr("height",height); //definen x axis & y axis var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .ticks(6); //creat x axis & y axis svg.append("g") .attr("class","axis") .call(xAxis) .attr("transform","translate(0,"+(height-padding)+")") .append("text") .text("天数") .attr("transform","translate("+(height-padding)+",0)"); var yAxis = d3.svg.axis() .scale(yScale) .orient("left") .ticks(6); svg.append("g") .attr("class","axis") .attr("transform","translate("+padding+",0)") .call(yAxis) //.append("text") //.text("人") //.attr("transform","translate(0,"+(padding)+")") ; </script> </body> </html> |
