可视化工具D3.js教程入门（第八章）—— 一个简单柱状图_html使用css或d3或js怎么把柱状图里面的柱形变细-CSDN博客

本文链接：https://blog.csdn.net/weixin_44867717/article/details/120428367

可视化工具D3.js教程入门（第八章）—— 一个简单柱状图

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>

<body>

    <svg width="500" height="400"></svg>

</body>

<script>

    var data = [90, 175, 72, 36, 54, 88, 24, 66];
    var margin = 30;//上下左右边距

    var svg = d3.select('svg');
    var width = svg.attr('width');
    var height = svg.attr('height');
    //创建一个矩形分组
    var g = svg.append('g').attr('transform', 'translate(' + margin + ',' + margin + ')');

    //定义x轴比例尺
    var scaleX = d3.scaleBand()
        .domain(d3.range(data.length))//[0, 1, 2, 3, 4, 5, 6, 7]
        .rangeRound([0, width - margin * 2]);//左右边距30

    //定义Y轴比例尺
    var scaleY = d3.scaleLinear().domain([0, d3.max(data)]).range([height - margin * 2, 0]);//上边距30   这里还得注意  range后面跟的参数  0放在第二位   因为y轴正方向是反的

    //绘制x y 轴
    var axisX = d3.axisBottom(scaleX);
    var axisY = d3.axisLeft(scaleY);
    g.append('g').attr('transform', 'translate(0,' + (height - margin * 2) + ')').call(axisX);
    g.append('g').attr('transform', 'translate(0,0)').call(axisY);

    var rectP = 30;//柱状图间距
    var gs = g.selectAll('rect').data(data).enter().append('g');//分组

    //绘制矩形
    gs.append('rect')
        .attr('x', function (d, i) {
            return scaleX(i) + rectP / 2;
        }).attr('y', function (d, i) {
            return scaleY(d);
        }).attr('width', function () {
            return scaleX.step() - rectP;
        }).attr('height', function (d, i) {
            return height - margin * 2 - scaleY(d);
        }).attr('fill', 'skyblue');

    //绘制文字
    gs.append('text')
        .attr('x', function (d, i) {
            return scaleX(i) + rectP / 2;
        })
        .attr('y', function (d, i) {
            return scaleY(d);
        })
        .text(function (d, i) {
            return d;
        });

</script>

</html>