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" //让字居中对齐
        })

最终效果：