【d3.js教程02】d3入門 · D3.js征途

![](https://box.kancloud.cn/2016-04-19_57161003d1807.jpg) ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .axis path, .axis line{ stroke: black; fill: none; shape-rendering: crispedges; } </style> <script src="js/d3.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <script type="text/javascript"> /*svg大小*/ var width = 400; var height = 400; /*svg周邊留白*/ var padding = {left:30,right:30,top:20,bottom:20}; /*在body里面添加一個SVG畫布*/ var svg = d3.select("body") .append("svg") .attr("width",width) .attr("height",height); /*定義一個數據集*/ var dataset = [10,20,30,40,50,60,33,25,12,5]; /*x軸的比例尺*/ var xScale = d3.scale.ordinal() //ordinal是序數的意思可以理解為序數比例尺（一組序數來分給定的范圍） .domain(d3.range(dataset.length)) //數據源(range會將數字生成數組) .rangeRoundBands([0,width-padding.left-padding.right]); //輸出結果集 /*y軸的比例尺*/ var yScale = d3.scale.linear() //linear理解為線性比例尺（一個線性的范圍來分給定的范圍） .domain([0,d3.max(dataset)]) //數據源 .range([height-padding.top-padding.bottom,0]); //對應輸出的結果集(故意要寫反，因為后面這個值是用來減去的) /*矩形塊之間的空白*/ var rectPadding = 4; /*定義坐標軸*/ var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom"); var yAxis = d3.svg.axis() .scale(yScale) .orient("left"); /*添加矩形元素*/ var rects = svg.selectAll(".MyRect") .data(dataset) .enter() .append("rect") .attr("class","MyRect") .attr("transform","translate("+padding.left+","+padding.top+")") .attr("x",function(d,i){ return xScale(i)+rectPadding/2; }) .attr("y",function(d){ return yScale(d); }) .attr("width",xScale.rangeBand()-rectPadding) .attr("height",function(d){ return height-padding.top-padding.bottom-yScale(d); }) .attr("fill","steelblue"); /*添加文字元素*/ var texts = svg.selectAll(".MyText") .data(dataset) .enter() .append("text") .attr("class","MyText") .attr("transform","translate("+padding.left+","+padding.top+")") //設定總體位移 .attr("x",function(d,i){ return xScale(i)-rectPadding; //設定各自水平位移 }) .attr("y",function(d){ return yScale(d); //設定各自豎直位移 }) .attr("dx",function(){ return (xScale.rangeBand() - rectPadding)/2; //各文字水平位移(這個位移是相對rect位移的) }) .attr("dy",function(d){ return 20; //各文字豎直位移 }) .text(function(d){ return d; //文本顯示 }) .attr("fill","white"); //設置為白色 /*添加坐標軸的元素*/ svg.append("g") .attr("class","axis") .attr("transform","translate("+padding.left+","+380+")") //規定坐標軸的位移 .call(xAxis); svg.append("g") .attr("class","axis") .attr("transform","translate("+padding.left+","+padding.top+")") .call(yAxis); </script> </body> </html> ~~~