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" //讓字顯示在條的內部
        })