d3.js-----柱状图

d3的神奇之处在于可以将数据和标签元素绑定起来

数据绑定图

代码如下：

var data = [1, 4, 2, 5, 22, 9, 11],
    bar_height = 50,
    bar_padding = 10,
    svg_height = (bar_height + bar_padding) * data.length,
    svg_width = 500

var svg = d3.select("#container")
    .append("svg")
    .attr("width", svg_width)
    .attr("height", svg_height)

var bar = svg.selectAll("g") //旋转svg中所有的g元素
    .data(data) //使用data()方法将data[]数组和g绑定起来
    .enter()
    .append("g")
    .attr("transform", function(d, i) {
        return "translate(0," + i * (bar_height + bar_padding) + ")";
    })
bar.append("rect")
    .attr({
        "width": function(d) {
            return d;
        },
        "height": bar_height
    })

效果如下：

添加填充样式

代码如下：

bar.append("rect")
    .attr({
        "width": function(d) {
            return d;
        },
        "height": bar_height
    })
    .style("fill", "lightgreen")

这个时候发现图特别小，所以要进行缩放，和前面画过的曲线图一样

定义缩放函数

var scale = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, svg_width]);
var svg = d3.select("#container")
    .append("svg")
    .attr("width", svg_width)
    .attr("height", svg_height)

使用缩放函数，修改返回值：

bar.append("rect")
    .attr({
        "width": function(d) {
            return scale(d);
        },
        "height": bar_height
    })

接下来给每一个柱形条上面添加数值，代码如下：

bar.append("text")
    .text(function(d) {
        return d;
    })

调整数值的位置

bar.append("text")
        .text(function(d) {
            return d;
        })
        .attr({ //设置数值的显示位置
            "x": function(d) {
                return scale(d);
            },
            "y": bar_height / 2,
            "text-anchor": "end" //让字显示在条的内部
        })