（补充）赶鸭子上架学D3.jsdataenter的（二）---data，datum，update，enter，exit基础概念（b站从零开始画图表学习笔记，感谢up主睿小狼）

绑定数据

D3.js常用的绑定数据的方法有两种   data和datum

从英文单词角度来说是data的附属

和date的区别与共同点：都是绑定数据集，但是data是将数组中的每一个元素绑定到svg元素上面，而datum的作用是把数组本身绑定到每个svg元素上面，

简而言之，data是一对一，datum是一对多

对数据状态的处理

d3把数据的状态分为三种形式：

• 数据与元素对应（update）
• 还没有元素但是有数据（enter）
• 没有数据，元素还在（exit）

update

const update = svg.selectAll("rect").data(dataset);
update.enter().append("rect").attr("fill","red")

第一句的返回值就是update

update可用于更新数据

利用update将之前代码更新并简化

    const dataset=[50,43,120,87,99,167,142];
    const height = 400;
    const width = 400;
    const svg = d3.select("#svg").append("svg").attr("height",height).attr("width",width);
    const padding = {top:20,left:20, right:20,bottom:20}
    const rectStep = 35;
    const rectWidth = 30;

    const genRect = obj=>{
        obj .attr("fill","red")
        .attr("x",(d,i)=>padding.left + i*rectStep)
        .attr("y",(d,i)=>height-padding.bottom-d)
        .attr("width",rectWidth)
        .attr("height",d=>d);
    }
    const genText = obj=>{
        obj.attr("fill","#fff")
         .attr("font-size","14px").attr("text-anchor","middle")
         .attr("x",(d,i)=>padding.left + i*rectStep)
         .attr("y",(d,i)=>height-padding.bottom-d)
         .text(d=>d)
         .attr("dx",rectWidth/2)
         .attr("dy","1em");
    }

    genRect(svg.selectAll("rect").data(dataset).enter().append("rect"));
    genText(svg.selectAll("text").data(dataset).enter().append("text"));
    genRect(svg.selectAll("rect").data([50,43,120,87,99,167,200]));    //括号内返回值即为update，如果不去掉enter，则不会更新
    genText(svg.selectAll("text").data([50,43,120,87,99,167,200]));

后四句也可以改成这个样子

const init = dataset=>{
        genRect(svg.selectAll("rect").data(dataset).enter().append("rect"));
        genText(svg.selectAll("text").data(dataset).enter().append("text"));
    }
 const update = dataset=>{
        genRect(svg.selectAll("rect").data(dataset));
        genText(svg.selectAll("text").data(dataset));
    }//分别对enter和update进行包装
    init(dataset);//调用enter方法
    update([50,43,120,87,99,167,200])//调用update方法

===============exit待补充============================