要把水平的柱形图转换为竖直的柱形图
难点: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" //让字居中对齐
})
最终效果: