初识d3.js(2) ——简单的条形图

最新推荐文章于 2022-08-21 23:21:03 发布

枫思然

最新推荐文章于 2022-08-21 23:21:03 发布

阅读量252

点赞数

分类专栏： js d3.js 文章标签： d3.js js

本文链接：https://blog.csdn.net/qq_38318589/article/details/102414323

版权

js 同时被 2 个专栏收录

24 篇文章 2 订阅

订阅专栏

d3.js

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="d3/d3.js"></script>
</head>
<body>
    <div id="box"></div>
</body>
</html>
<script>
    let arr = [12,22,8,14,25,6,17];
    let bar_h = 50;
    let bar_m = 10;
    let svg_w = 600;
    let svg_h = (bar_h + bar_m) * arr.length;

    //scale缩放功能  linear线型缩放  domain设置初始比率值  range()缩放后的比率
    //把初始数组中的比率根据svg整个的画布宽度进行换算  返回一个方法
    let scale = d3.scale.linear().domain([0,d3.max(arr)]).range([0,svg_w]);

    //向box添加一个svg元素并设置宽高,attr给元素添加属性
    let svg = d3.select('#box').append('svg').attr({'height':svg_h,'width':svg_w});

    //d3的方法中如果在前边已经接收过数据,后边的方法在回调函数中都可以去使用这些数据,
    //函数中的第一个参数是数据,第二个参数是下标
    //给svg画板画板中添加g元素,平移g元素
    let bar = svg.selectAll('g').data(arr).enter().append('g').style(
        'transform',function (v,i) {
            //console.log(v,i);
            //return 'translate(0,' + (bar_h + bar_m) * i + 'px)'
            return `translate(0,${(bar_h + bar_m) * i}px)`
        }
    );

    //添加矩形
    bar.append('rect')
        .attr({
            'width':v => scale(v),    //rect的宽度应该是使用比率换算过之后的值
            'height':bar_h
        }).style('fill','#48e');

    //添加文字
    bar.append('text').text( v => v )
        .attr({
            'x':v => scale(v),
            'y':bar_h / 2,
            'dx':-10,
            'dy':5,
            'text-anchor':'end'
        })
</script>