本示例采用d3的3.x版本库,示例代码如下:
d3.fullAxisExample = function()
{
var width = 240;
var height = 240;
//在 body 里添加一个 SVG 画布
if (svg == undefined)
{
svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
}
//画布周边的空白
var padding = { left: 30, right: 30, top: 20, bottom: 20 };
//定义一个数组
var dataset = [10, 20, 30, 40, 33, 24, 12, 5];
//x轴的比例尺(ordinal表示顺序比例尺,按照数量产生比例尺序号)(本例中横坐标采用数组 序号表示)
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0, width - padding.left - padding.right]);
//y轴的比例尺 domian表示输入数据的范围,range表示输出数据的范围(本例中Y轴输出范围为0-到指定的画板高度并减去边缘值)
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([height - padding.top - padding.bottom, 0]);
//定义x轴
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
//定义y轴
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
//矩形之间的空白
var rectPadding = 4;
//添加矩形元素说明,说明文字和坐标轴需要对应起来===
var rects = svg.selectAll(".MyRect")
.data(dataset)
.enter()
.append("rect")
.attr("class", "MyRect")
.attr("transform", "translate(" + padding.left + "," + padding.top + ")")
.attr("x", function (d, i) {
return 200+xScale(i) + rectPadding / 2;
})
.attr("y", function (d) {
var min = yScale.domain()[0];
return yScale(min);
//return yScale(d);
})
.attr("width", xScale.rangeBand() - rectPadding)
.attr("height", function (d) {
return height - padding.top - padding.bottom - yScale(d);
}).attr("height", function (d) {
return 0;
})
.transition()
.delay(function (d, i) {
return i * 200;
})
.duration(2000)
.ease("bounce")
.attr("y", function (d) {
return yScale(d);
})
.attr("height", function (d) {
return height - padding.top - padding.bottom - yScale(d);
});
;
//添加文字元素
var texts = svg.selectAll(".MyText")
.data(dataset)
.enter()
.append("text")
.attr("class", "MyText")
.attr("transform", "translate(" + padding.left + "," + padding.top + ")")
.attr("x", function (d, i) {
return 200+xScale(i) + rectPadding / 2;
})
.attr("y", function (d) {
return yScale(d);
})
.attr("dx", function () {
return (xScale.rangeBand() - rectPadding) / 2;
})
.attr("dy", function (d) {
return 20;
})
.text(function (d) {
return d;
}).transition()
.delay(function (d, i) {
return i * 200;
});
//添加x轴
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + (200+padding.left) + "," + (height - padding.bottom) + ")")
.call(xAxis);
//添加y轴
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" +(200+ padding.left) + "," + padding.top + ")")
.call(yAxis);
}