一個完整的柱形圖包含三部分：矩形遥昧、文字、坐標(biāo)軸朵纷。

這里對前幾章的內(nèi)容進(jìn)行綜合的運(yùn)用渠鸽，制作一個實(shí)用的柱形圖，內(nèi)容包括：選擇集柴罐、數(shù)據(jù)綁定徽缚、比例尺、坐標(biāo)軸等內(nèi)容革屠。

案例-完整的柱形圖

.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軸的序數(shù)比例尺
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])

// 定義坐標(biāo)軸,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,因?yàn)樗祷氐氖且粋€數(shù)組凿试，應(yīng)當(dāng)使用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);

完整的柱狀圖.png