d3.js学习笔记（一）—–柱状图的显示

飞熊 • 2023年7月21日上午11:37 • 技术随笔 • 阅读 271

d3.js之柱状图的显示

步骤：

1、添加 svg （注意：此步不需要用.enter()来给DOM元素占位，用了.enter()会出错）
2、在 svg 中添加 rect 矩形条，（注意：矩形条之间要有间距，且需要用.enter()来给 rect 元素占位）
3、给矩形条添加文本

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>d3 条形图</title>
    <script type="text/javascript" src="d3.js"></script>
    <style>
        .text{
            font-family:sans-serif;
            font-size:15px;
            text-anchor: middle; 
        }
    </style>
</head>
<body>
    <script>
        var dataset=[5,10,15,40,22,90,76,20,25,6,28,34,65,24,55,81,34,37,66];
        var w=500;
        var h=400;
        var barPadding=1;  //间距
        //添加svg
        var svg=d3.select("body")
                    .append("svg")
                    .attr("width",w)
                    .attr("height",h);

        //添加矩形，条形图
        svg.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("x",function(d,i){ return i*(w/dataset.length);})
            //使条形图由下而上，因为原点坐标在左上角
            .attr("y",function(d){ return h-d*3; })    
            .attr("width",w/dataset.length-barPadding)
            .attr("height",function(d){return d*4; })
            .attr("fill",function(d){return "rgb(120,200,"+(d*5)+")"; });

        //添加文本
        svg.selectAll("text")
            .data(dataset)
            .enter()
            .append("text")
            .text(function(d){ return d;})
            .attr("class","text")
            .attr("x",function(d,i){ return i*(w/dataset.length)+(w/dataset.length-barPadding)/2;})
            .attr("y",function(d){ return h-d*3+14; })


    </script>
</body>
    
</html>