• 第八章 完整的柱形图
    • 添加 SVG 画布
    • 定义数据和比例尺
    • 定义坐标轴
    • 添加矩形和文字元素
    • 添加坐标轴的元素
    • 源代码

    第八章 完整的柱形图

    一个完整的柱形图包含三部分：矩形、文字、坐标轴。本章将对前几章的内容进行综合的运用，制作一个实用的柱形图，内容包括：选择集、数据绑定、比例尺、坐标轴等内容。

    柱形图

    添加 SVG 画布

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

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

    定义数据和比例尺

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

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

    定义坐标轴

    1. //定义x轴
    2. var xAxis = d3.svg.axis()
    3.     .scale(xScale)
    4.     .orient("bottom");
    6. //定义y轴
    7. var yAxis = d3.svg.axis()
    8.     .scale(yScale)
    9.     .orient("left");

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

    添加矩形和文字元素

    1. //矩形之间的空白
    2. var rectPadding = 4;
    4. //添加矩形元素
    5. var rects = svg.selectAll(".MyRect")
    6.         .data(dataset)
    7.         .enter()
    8.         .append("rect")
    9.         .attr("class","MyRect")
    10.         .attr("transform","translate(" + padding.left + "," + padding.top + ")")
    11.         .attr("x", function(d,i){
    12.             return xScale(i) + rectPadding/2;
    13.         } )
    14.         .attr("y",function(d){
    15.             return yScale(d);
    16.         })
    17.         .attr("width", xScale.rangeBand() - rectPadding )
    18.         .attr("height", function(d){
    19.             return height - padding.top - padding.bottom - yScale(d);
    20.         });
    22. //添加文字元素
    23. var texts = svg.selectAll(".MyText")
    24.         .data(dataset)
    25.         .enter()
    26.         .append("text")
    27.         .attr("class","MyText")
    28.         .attr("transform","translate(" + padding.left + "," + padding.top + ")")
    29.         .attr("x", function(d,i){
    30.             return xScale(i) + rectPadding/2;
    31.         } )
    32.         .attr("y",function(d){
    33.             return yScale(d);
    34.         })
    35.         .attr("dx",function(){
    36.             return (xScale.rangeBand() - rectPadding)/2;
    37.         })
    38.         .attr("dy",function(d){
    39.             return 20;
    40.         })
    41.         .text(function(d){
    42.             return d;
    43.         });

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

    添加坐标轴的元素

    1. //添加x轴
    2. svg.append("g")
    3.   .attr("class","axis")
    4.   .attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
    5.   .call(xAxis); 
    7. //添加y轴
    8. svg.append("g")
    9.   .attr("class","axis")
    10.   .attr("transform","translate(" + padding.left + "," + padding.top + ")")
    11.   .call(yAxis);

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

    源代码

    下载地址：rm51.zip

    展示地址：http://www.ourd3js.com/demo/rm/R-5.1/Chart.html