d3.js学习笔记（六）----- 条形图元素的删除

Martian_小小

于 2021-02-05 13:59:16 发布

阅读量405

点赞数

分类专栏： D3.js 文章标签： d3.js 数据可视化

本文链接：https://blog.csdn.net/weixin_45950819/article/details/113694265

版权

D3.js 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

条形图元素的删除

一、准备数据

var dataset=[{ key:0,value:42},{ key:1,value:21}…]

二、更新引用

d --> d.value

三、键函数

在这里插入图片描述

四、从数据集中删除一个元素

dataset.shift()

五、退出过渡

在这里插入图片描述
源代码：

<!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>
    <button>Delete datas</button> <!--必须放在script前面--> 
    <script>
        var dataset=[{key:0,value:5},
                     {key:1,value:10},
                     {key:2,value:15},
                     {key:3,value:40},
                     {key:4,value:22},
                     {key:5,value:80},
                     {key:6,value:76},
                     {key:7,value:20},
                     {key:8,value:25},
                     {key:9,value:6},
                     {key:10,value:8},
                     {key:11,value:34},
                     {key:12,value:65},
                     {key:13,value:24},
                     {key:14,value:55},
                     {key:15,value:81},
                     {key:16,value:34},
                     {key:17,value:37},
                     {key:18,value:66}];
        var w=600;
        var h=300;
        //添加svg
        var svg=d3.select("body")
                    .append("svg")
                    .attr("width",w)
                    .attr("height",h);

        //添加序数比例尺,序数的输入值域是序数，通常是要指定一个包含类别名称的数组
        var xScale=d3.scaleBand()
                        .domain(d3.range(dataset.length))
                        .rangeRound([0,w])
                        .paddingInner(0.05);

        var yScale=d3.scaleLinear()
                        .domain([0,d3.max(dataset,function(d) {return d.value; })])
                        .range([0,h]);

        //定义键函数,以备把数据绑定到元素时使用
        var key=function(d){
            return d.key;
        }
                      
        //添加矩形，条形图
        svg.selectAll("rect")
            .data(dataset,key)
            .enter()
            .append("rect")
            .attr("x",function(d,i){ return xScale(i);})
            .attr("y",function(d){ return h-yScale(d.value); })    //使条形图由下而上
            .attr("width",xScale.bandwidth())
            .attr("height",function(d){return yScale(d.value); })
            .attr("fill",function(d){return "rgb(120,200,"+(d.value*5)+")"; });

        //添加文本
        svg.selectAll("text")
            .data(dataset,key)
            .enter()
            .append("text")
            .text(function(d){ return d.value;})
            .attr("class","text")
            .attr("x",function(d,i){ return xScale(i)+xScale.bandwidth()/2;})
            .attr("y",function(d){ return h-yScale(d.value)+14; });
        
        //给p标签添加点击事件
        d3.select("button")
            .on("click",function(){
                dataset.shift();                
              
                //更新矩形
                var bars=svg.selectAll("rect")
                             .data(dataset,key);

                //条形退出
                bars.exit()
                    .transition() 
                    .duration(1000) 
                    .attr("x",-xScale.bandwidth()) //从左边退出
                    .remove();

                //文本退出
                svg.selectAll("text")
                    .data(dataset,key)
                    .exit()
                    .transition() //添加过渡效果
                    .duration(500) //控制动画的持续时间
                    .attr("x",-xScale.bandwidth())
            });
    </script>
</body>
</html>

结果如图：
未点击时：
在这里插入图片描述
点击两次后：

总结：

data（）把数据绑定到元素，也会返回更新元素集
更新元素可能包含加入和退出元素集，这两个元素集可以通过**enter（）和exit（）**得到

Martian_小小

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
d3.js学习笔记（六）----- 条形图元素的删除

条形图元素的删除一、准备数据var dataset=[{ key:0,value:42},{ key:1,value:21}…]二、更新引用d --> d.value三、键函数四、从数据集中删除一个元素dataset.shift()五、退出过渡源代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo
复制链接

扫一扫