欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

d3.js 柱状图

程序员文章站 2022-07-13 15:52:34
...
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="">
</head>
<body>
<div class="chart">
    <svg width="400" height="300">
        <rect></rect>
        <rect></rect>
        <rect></rect>
        <rect></rect>
        <rect></rect>
        <rect></rect>
        <rect></rect>
    </svg>
</div>


<script src="../d3.js"></script>
<script>
    var arr = [111,221,233,114,78,99];
    var svg = d3.select('svg');
    function draw() {
        var updata = svg.selectAll('rect')
            .data(arr);
        var enter = updata.enter();
        var exit = updata.exit();

        //更新部分
        updata
            .attr('fill','#00f')
            .attr('width',40)
            .attr('height',function (value) {
                return value;
            })
            .attr('x',function (value,index) {
                return index * 50;
            })
            .attr('y',function (value) {
                return 300 - value;
            });

        enter
            .append('rect')
            .attr('fill','#00f')
            .attr('width',40)
            .attr('height',function (value) {
                return value;
            })
            .attr('x',function (value,index) {
                return index * 50;
            })
            .attr('y',function (value) {
                return 300 - value;
            });

        //
        exit.remove();

    }

    draw();
</script>
</body>
</html>

 

相关标签： d3.js

上一篇： JFreeChart Bar Chart（柱状图）

下一篇： Chart and Graph 柱状图

推荐阅读