D3-SVG 画布完整的柱形图

   D3.js  完整的柱形图

添加 SVG 画布

//画布大小 var width = 400; var height = 400; //在 body 里添加一个 SVG 画布 var svg = d3.select("body") .append("svg") .attr("width", width) .attr("height", height); //画布周边的空白 var padding = {left:30, right:30, top:20, bottom:20};

1 2 3 4 5 6 7 8 9 10 11 12

//画布大小 var width= 400; varheight =400;   //在 body 里添加一个 SVG 画布   var svg= d3.select("body")     .append("svg")     .attr("width",width)     .attr("height",height);   //画布周边的空白 varpadding ={left:30,right:30,top:20,bottom:20};

上面定义了一个 padding，是为了给 SVG 的周边留一个空白，最好不要将图形绘制到边

界上。

2. 定义数据和比例尺

//定义一个数组 var dataset = [10, 20, 30, 40, 33, 24, 12, 5]; //x轴的比例尺 var xScale = d3.scale.ordinal() .domain(d3.range(dataset.length)) .rangeRoundBands([0, width - padding.left - padding.right]); //y轴的比例尺 var yScale = d3.scale.linear() .domain([0,d3.max(dataset)]) .range([height - padding.top - padding.bottom, 0]);

1 2 3 4 5 6 7 8 9 10 11 12

//定义一个数组 var dataset= [10,20,30,40,33,24,12,5];          //x轴的比例尺 varxScale =d3.scale.ordinal()     .domain(d3.range(dataset.length))     .rangeRoundBands([0,width -padding.left- padding.right]);   //y轴的比例尺 var yScale= d3.scale.linear()     .domain([0,d3.max(dataset)])     .range([height- padding.top- padding.bottom,0]);

x 轴使用序数比例尺，y 轴使用线性比例尺。要注意两个比例尺值域的范围。

3. 定义坐标轴

//定义x轴 var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom"); //定义y轴 var yAxis = d3.svg.axis() .scale(yScale) .orient("left");

1 2 3 4 5 6 7 8 9

//定义x轴 var xAxis= d3.svg.axis()     .scale(xScale)     .orient("bottom");          //定义y轴 varyAxis =d3.svg.axis()     .scale(yScale)     .orient("left");

x 轴刻度的方向向下，y 轴的向左。

4. 添加矩形和文字元素

//矩形之间的空白 var rectPadding = 4; //添加矩形元素 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); }); //添加文字元素 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/2; } ) .attr("y",function(d){ return yScale(d); }) .attr("dx",function(){ return (xScale.rangeBand() - rectPadding)/2; }) .attr("dy",function(d){ return 20; }) .text(function(d){ return d; });

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

//矩形之间的空白 var rectPadding= 4;   //添加矩形元素 varrects =svg.selectAll(".MyRect")         .data(dataset)         .enter()         .append("rect")         .attr("class","MyRect")         .attr("transform","translate("+ padding.left+ ","+ padding.top+ ")")         .attr("x",function(d,i){             returnxScale(i)+ rectPadding/2;         })         .attr("y",function(d){             returnyScale(d);         })         .attr("width",xScale.rangeBand()- rectPadding)         .attr("height",function(d){             returnheight -padding.top- padding.bottom- yScale(d);         });   //添加文字元素 vartexts =svg.selectAll(".MyText")         .data(dataset)         .enter()         .append("text")         .attr("class","MyText")         .attr("transform","translate("+ padding.left+ ","+ padding.top+ ")")         .attr("x",function(d,i){             returnxScale(i)+ rectPadding/2;         })         .attr("y",function(d){             returnyScale(d);         })         .attr("dx",function(){             return(xScale.rangeBand()- rectPadding)/2;         })         .attr("dy",function(d){             return20;         })         .text(function(d){             returnd;         });

矩形元素和文字元素的 x 和 y 坐标要特别注意，要结合比例尺给予适当的值。

5. 添加坐标轴的元素

//添加x轴 svg.append("g") .attr("class","axis") .attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")") .call(xAxis); //添加y轴 svg.append("g") .attr("class","axis") .attr("transform","translate(" + padding.left + "," + padding.top + ")") .call(yAxis);

1 2 3 4 5 6 7 8 9 10 11

//添加x轴 svg.append("g")   .attr("class","axis")   .attr("transform","translate("+ padding.left+ ","+ (height- padding.bottom)+ ")")   .call(xAxis);          //添加y轴 svg.append("g")   .attr("class","axis")   .attr("transform","translate("+ padding.left+ ","+ padding.top+ ")")   .call(yAxis);

坐标轴的位置要结合空白 padding 的值来设定。