基础柱状图

image.png

#app {
    width: 300px;
    height: 400px;
    background: #efefef;
    position: relative;
}

.bar {
    float: left;
    width: 50px;
    background: green;
    position: absolute;
    bottom: 100px;
}

.bar span {
    display: block;
    text-align: center;
}

要绘图，首要需要的是一块绘图的“画布”。

<div id="app">
</div>

为简单起见，我们直接用数值的大小来表示矩形的像素宽度（后面会说到这不是一种好方法）。然后，添加以下代码。

var datalist = [10, 20, 30, 40, 50]
var max = Math.max.apply(null, datalist)
var padding = 10;
var container = d3.select("#app");

container.selectAll('div')
    .data(datalist)
    .enter()
    .append('div')
    .classed('bar', true)
    .style('height', function (d, i) {
        var height = d / max * (300 - padding * 2);
        return height + 'px';
    })
    .style('left', function (d, i) {
        return i * 60 + padding + 'px'
    })
    .append('span')
    .text(function (d) {
        return d;
    })
    .style('color', function (d, i) {
        if (d > 30) {
            return 'red'
        }
    })

将图表标签更换成svg

D3 虽然没有明文规定一定要在 SVG 中绘图，但是 D3 提供了众多的 SVG 图形的生成器，它们都是只支持 SVG 的。因此，建议使用 SVG 画布。

<div id="app">
</div>

要注意，在 SVG 中，x 轴的正方向是水平向右，y 轴的正方向是垂直向下的。

var datalist = [10, 20, 30, 40, 50, 60]
var max = Math.max.apply(null, datalist)
// 设置容器的宽高
var height = 300;
var width = 400;
// 内边距
var padding = { top: 20, left: 20 }
// 柱状图的边距
var margin = 10;
// 柱状图的宽度
var barWidth = (width - padding.left * 2 - margin * (datalist.length - 1)) / datalist.length;

var container = d3.select("#app")
    .append('svg')
    .attr('width', width + 'px')
    .attr('height', height + 'px')
    .style('position', 'relative')
    .style('background', '#efefef');

// 添加 5 个矩形
container.selectAll('rect').data(datalist)
    .enter()
    .append('rect')
    .classed('bar', true)
    .style('width', barWidth)
    .style('background', '#c33')
    .style('height', function (d, i) {
        let barHeight = d / max * (height - padding.top * 2)
        return barHeight + 'px';
    })
    .attr('x', function (d, i) {
        return i * (barWidth + margin) + padding.left + 'px'
    })
    .attr('y', function (d, i) {
        var barHeight = d / max * (height - padding.top * 2);
        return height - barHeight - padding.top + 'px';
    })

// 设置 5 个文字的颜色和位置
container.selectAll('text').data(datalist)
    .enter()
    .append('text')
    .style('font-size', '18px')
    // text-anchory=start|middle|end来设置文本的对齐方式
    .attr('text-anchor', 'middle')
    .text(function (d) {
        return d;
    })
    .attr('x', function (d, i) {
        return i * (barWidth + margin) + padding.left + barWidth / 2 + 'px'
    })
    .attr('y', function (d, i) {
        var barHeight = d / max * (height - padding.top * 2);
        return height - barHeight - padding.top + 'px';
    })
    .style('fill', function (d) {
        if (d > 30) {
            return 'red'
        }
        return '#000'
    })