d3--豎直柱狀圖

要把水平的柱形圖轉換爲豎直的柱形圖

難點：x軸和y軸的縮放轉換，由於計算機的座標系和普通幾何座標系不一樣

水平

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 data = [1, 4, 2, 5, 22, 9, 11],

// bar_height=50, //相對於y軸就要改成 bar_width,而後經過全局查找將所有的bar_width改成bar_width
bar_width = 50,//相對於y軸就要改成width 
bar_padding = 10,
svg_width = (bar_width + bar_padding) * data.length, //將變量svg_height 改成 svg_width
svg_height = 500

// 定義縮放函數

水平

var scale = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, svg_width]);

豎直

var scale = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([svg_height, 0]);

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) + ")";
        //豎直：return "translate(" + i * (bar_height + bar_padding) + ",0)";
        })

水平矩形塊：

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

豎直矩形塊：

bar.append("rect")
    .attr({
        "y": function(d) {
            return scale(d);
        },
        "width": bar_width,
        "height": function(d) {
            return svg_height - scale(d);
        }
    })
    .style("fill", "lightgreen")

調整文字標籤的位置

水平代碼：

bar.append("text")
    .text(function(d) {
        return d;
    })
    .attr({ //設置數值的顯示位置
        "x": function(d) {
            return scale(d);
        },
        "y": bar_height / 2,
        "text-anchor": "end" //讓字顯示在條的內部
    })

豎直代碼：

bar.append("text")
        .text(function(d) {
            return d;
        })
        .attr({ //x軸和y軸互換後
            "y": function(d) {
                return scale(d);
            },
            "x": bar_width / 2,
            "dy": 15,//相對y軸的偏移量
            "text-anchor": "middle" //讓字居中對齊
        })

最終效果：