D3 .js update、enter、exit 数据更新是的处理模板

最新推荐文章于 2021-09-22 16:21:24 发布

蜗牛速度额

最新推荐文章于 2021-09-22 16:21:24 发布

阅读量767

点赞数

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

本文链接：https://blog.csdn.net/weixin_41111068/article/details/81979665

版权

D3.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

如果不知道数组的长度，如何update、enter、exit 提供处理方案。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="d3.js"></script>
<script>
    function update_exit_enter(dataset) {
        let p = d3.select('body').selectAll('p');
        // 绑定数据后，分别返回update、enter、exit部分
        const update = p.data(dataset);
        const enter = update.enter();
        const exit = update.exit();
        // 1.update部分的处理方法
        update.text(function(d) {
            return d;
        });
        // 2.enter部分的处理方法
        enter.append('p')
            .text(function(d) {
                return d;
            });
        // 3.exit部分的处理方法
        exit.remove();
    }
    update_exit_enter([10,20,30])
</script>
</body>
</html>