2 D3 关于update enter exit

update enter exit

主要用于处理数据元素和DOM元素不匹配的情况，此API我觉得目的就是让DOM和datalist在数量级上匹配起来

  • update 其实没有这个函数，只不过为了区分enter和exit而虚构出来的
  • enter 数据元素个数多于DOM元素，处理的是少去的DOM部分，通常需要增加DOM元素
  • exit 数据元素少于DOM元素，处理的是多出的DOM部分，通常需要删除DOM元素

enter

应用场景
比如现在datalist是个长度为5的数组，但是DOM元素只有三个
如果要让DOM元素变成5个，那么你就需要使用enter

<script src="https://d3js.org/d3.v5.min.js"></script>
<body>
    <p></p>
    <p></p>
    <p></p>
    <script>
        let datalist = [1,2,3,4,5]
        let container = d3.selectAll('p')
        .text('aaa')
        .data(datalist)
        //enter操作的是数量多出来的那一部分
        .enter()
        //添加元素
        .append('p')
        .text((d,i)=>d)
    </script>
</body>

效果：

exit

比如现在有5个dom,但是数据长度为3，如果想删去多出的两个dom,可以用exit

<script src="https://d3js.org/d3.v5.min.js"></script>
<body>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <script>
        // exit 
        let datalist = [1,2,3]
        let container = d3.selectAll('p')
        .text('aaa')
        .data(datalist)
        .exit()
        //remove之后只剩三个
        .remove()
    </script>
</body>

update

虚构的方法，表示dom数量对应data长度，用于区分exit和enter

posted @ 2020-06-01 22:33  IslandZzzz  阅读(164)  评论(0)    收藏  举报