上一篇是曲線的繪制，這樣僅僅只是有一條線，完全先是不出數據想要表現的內容，於是我們要添加坐標系，添加坐標系和畫線類似。
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.完成后的樣式
