? ? 本人的個人博客為: www.ourd3js.com?
? ? csdn博客為: blog.csdn.net/lzhlzz ?
? ? 轉載請注明出處,謝謝。
? ? 在前面幾節中重復出現了例如以下代碼:
svg.selectAll("rect") .data(dataset) .enter() .append("rect")? ? 當所選擇的 rect 數量比綁定的數據 dataset 的數量少的時候,一般會用到以上代碼,這一節就具體說說當 被選擇元素和數據數量不一致時 該怎樣處理。
? ? 這一節將涉及到三個函數。
1. update() ? ?當相應的元素正好滿足時 ( 綁定數據數量 = 相應元素 )
? ? 實際上并不存在這樣一個函數,僅僅是為了要與之后的 enter 和 exit 一起說明才想象有這樣一個函數。但相應元素正好滿足時,直接操作就可以,后面直接跟 text ,style 等操作就可以。
2. enter() ? ?當相應的元素不足時 ?( 綁定數據數量 > 相應元素 )
? ? 當相應的元素不足時,通常要加入元素,使之與綁定數據的數量相等。后面通常先跟 append 操作。
3. exit() ? ? ?當相應的元素過多時?( 綁定數據數量 < 相應元素 )
? ? 當相應的元素過多時,通常要刪除元素,使之與綁定數據的數量相等。后面通常要跟 remove 操作。
? ? 以下看看詳細的使用方法:
<body> <p>AAAAAAAAA</p> <p>BBBBBBBBB</p> <p>CCCCCCCCC</p> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script> var dataset = [ 10 , 20 , 30 , 40 , 50 ]; var update = d3.select("body").selectAll("p").data(dataset); var enter = update; update.text(function(d,i){ return "update " + d; }); enter.enter() .append("p") .text(function(d,i){ return "enter " + d; }); </script> </body>? ? 上面的代碼分別用了變量名 update 和 enter 來表示各自的部分,上面的代碼的結果為:

var dataset = [ 10 , 20 ]; var update = d3.select("body").selectAll("p").data(dataset); var exit = update; update.text(function(d,i){ return "update " + d; }); exit.exit() .text(function(d,i){ return "exit"; });? ? 結果圖為:

exit.exit() .remove();
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
