繫結資料

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待補充============================