D3.js 学习( 一)
<html> <head> <meta charset="utf-8"> <title>第三课:为柱形图添加坐标轴</title> <style> .axis path, .axis line{ fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } .MyRect { fill: steelblue; } .MyText { fill: white; text-anchor: middle; } </style> </head> <body> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script> var body = d3.select("body"); var width = 400; var height = 400; var svg = body.append("svg") .attr("width", 400) .attr("height", 400); // 1. 比例尺 var xScale = d3.scale.ordinal() .domain([0, 1, 2, 3, 4, 5, 6]) .rangeRoundBands([0,300]);//在300个像素上平均分配 console.info(xScale(1)); // 2. 坐标轴 x var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom"); var gxAxis = svg.append("g") .attr("class","axis") .attr("transform","translate(30,300)") .call(xAxis); // 3. y轴 var yScale = d3.scale.linear() .domain([100, 0]) .range([0, 250]); var yAxis = d3.svg.axis() .scale(yScale) .orient("left"); var gyAxis = svg.append("g") .attr("class","axis") .attr("transform","translate(30,50)") .call(yAxis); //绘制矩形 var dataset = [30, 20 , 10, 60, 50, 40, 33]; yScale.domain([0,100]); var rects = svg.selectAll(".MyRect") .data(dataset) .enter() .append("rect") .attr("class","MyRect") .attr("transform","translate(30,50)") .attr("x", function(d,i){ return xScale(i); }) .attr("y", function(d){ return width - 150 - yScale(d); }) .attr("width",function(){ return xScale.rangeBand() - 4; }) .attr("height",function(d){ return yScale(d); }); var texts = svg.selectAll(".MyText") .data(dataset) .enter() .append("text") .attr("class","MyText") .attr("transform","translate(30,50)") .attr("x", function(d,i){ return xScale(i); }) .attr("y", function(d){ return width - 150 - yScale(d); }) .attr("dx",function(){ return xScale.rangeBand()/2; }) .attr("dy",function(d){ return 15; }) .text(function(d){ return d; }); </script> </body> </html>
每天用心记录一点点。内容也许不重要,但习惯很重要!