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

如果不知道数组的长度,如何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>

无论网页中的p元素是多余的还是不足的,最终的结果必定是一个p元素对应数组中的一项,没有多余

猜你喜欢

转载自blog.csdn.net/weixin_41111068/article/details/81979665
今日推荐