05-D3.js完整的柱状图（比例尺+坐标轴）

一个完整的柱形图包含三部分：矩形、文字、坐标轴。

这里对前几章的内容进行综合的运用，制作一个实用的柱形图，内容包括：选择集、数据绑定、比例尺、坐标轴等内容。

案例-完整的柱形图

.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 14px;
}

.MyRect {
    fill: yellowgreen;
}

.MyText {
    fill: white;
    text-anchor: middle;
}

var width = 400;
var height = 400;

// 在body中添加一个SVG画布
var 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, 50, 40, 30, 20, 10]

// x轴的序数比例尺
var xScale = d3.scaleBand()
    .domain(d3.range(dataset.length))
    .range([0, width - padding.left - padding.right])
// y轴的线性比例尺
var yScale = d3.scaleLinear()
    .domain([0, d3.max(dataset)])
    .range([height - padding.top - padding.bottom, 0])

// 定义坐标轴,x轴向下,y轴向左
var xAxis = d3.axisBottom(xScale)
var yAxis = d3.axisLeft(yScale)

// 矩形之间的空白
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 xScale(i) + rectPadding / 2
    })
    .attr('y', function (d) {
        return yScale(d)
    })
    // 每个矩形元素的宽度,这里不能用xScale.range,因为它返回的是一个数组，应当使用xScale.bandwidth()
    .attr('width', xScale.bandwidth() - rectPadding)
    .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 xScale(i) + rectPadding / 2;
    })
    .attr("y", function (d) {
        return yScale(d);
    })
    .attr("dx", function () {
        return (xScale.bandwidth() - rectPadding) / 2;
    })
    .attr("dy", function (d) {
        return 20;
    })
    .text(function (d) {
        return d;
    });

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
    .call(yAxis);