涓€銆佸墠瑷€1.1浠€涔堟槸D3.js锛烡3.js鏄竴涓熀浜嶫avaScript寮€鍙戠殑搴撱€備富瑕佺敤浜庡湪娴忚鍣ㄤ腑鎿嶄綔SVG銆丠TML銆丆SS銆傞€氬父锛屾垜浠彲浠ョ敤瀹冩潵缁樺埗涓€浜涘浘琛ㄣ€?.2.涓轰粈涔堣瀛︿範D3.js鍦ㄥ涔犳煇椤规妧鏈箣鍓嶏紝鏈€濂芥湁涓€浜涙槑纭殑鐩爣锛岃繖鏍锋墠涓嶅鏄撳湪瀛︿範鐨勮繃绋嬩腑杩峰け浜嗙洰鏍囷紝鍒板ご鏉ュ彧瀛︾毊姣涖€傚湪鎴戠湅鏉ワ紝瀛︿範D3涓昏鏈変互涓嬪嚑涓柟闈細鑷繁鏈夊叴瓒ｏ紝甯屾湜鍦ㄤ笟浣欐椂闂村涔犱竴浜涜嚜宸辨劅鍏磋叮鐨勬妧鏈紱鍚屾椂D3涔熸湁涓€瀹氱殑澶嶆潅鎬э紝涔熻兘鎷撳鎴戠殑鎶€鏈箍搴︺€傜粯鍒朵竴浜涗氦浜掑紡鍥捐〃寰堟柟渚裤€傚悓鏃讹紝姣斾笟鐣岀幇鎴愮殑缁勪欢搴撴洿鍏峰畾鍒跺寲銆傚彲浠ユ牴鎹嚜宸辩殑闇€瑕佺伒娲诲疄鐜颁竴浜涘姛鑳姐€傞儴鍒嗗伐浣滄秹鍙婂埌鍥捐〃浜や簰锛屽彈鍒朵簬閮ㄥ垎缁勪欢搴撶殑瀹氬埗銆傛按骞充笉楂橈紝鎴栬€呮枃妗ｅお澶嶆潅锛屼笉鑳芥弧瓒充竴浜涢渶姹傘€傚洜姝わ紝鍦ㄨ繖浜涘姩鏈虹殑椹变娇涓嬶紝鎴戝喅瀹氬涔犲浣曚娇鐢―3搴撱€?.鍩虹鐭ヨ瘑2.1甯哥敤API2.1.1銆侀€夋嫨鑺傜偣API鍔熻兘璇存槑d3.select鐢ㄤ簬閫夋嫨涓€涓猟om鍏冪礌锛岀被浼糳ocument.querySelectord3.selectAll鐢ㄤ簬閫夋嫨澶氫釜dom鍏冪礌锛岀被浼糳ocument.querySelectorAll2.1.2,淇敼鑺傜偣API鍑芥暟璇存槑selection.text("content")鑾峰彇鎴栬繑鍥炲綋鍓嶉€変腑鑺傜偣鐨勬枃鏈唴瀹箂election.append("鍏冪礌鍚嶇О")灏嗚妭鐐规坊鍔犲埌褰撳墠閫変腑鑺傜偣鐨勬湯灏緎election.insert("elementname")鍦ㄥ綋鍓嶉€変腑鐨勮妭鐐箂election.remove涓彃鍏ヤ竴涓妭鐐箂election.remove绉婚櫎鎸囧畾鐨勮妭鐐箂election.html("content")鑾峰彇鎴栬繑鍥炲綋鍓嶉€変腑鐨勮妭鐐箂election.attr("name",value)鑾峰彇鎴栬繑鍥炶缃綋鍓嶉€変腑鑺傜偣鐨勫睘鎬ч€夋嫨.property("name",value)鍚屼笂selection.style("name",value)鑾峰彇鎴栬缃綋鍓嶉€変腑鑺傜偣鐨勬牱寮弒election.classed("cssclass",bool)鑾峰彇銆佸垹闄ゆ垨娣诲姞褰撳墠閫変腑鑺傜偣鐨勭被鍚峉electednode2.1.3锛屾坊鍔犲拰鍒犻櫎鑺傜偣selection鐨凙PI鍑芥暟璇存槑銆俤ata灏嗘暟鎹粦瀹氬埌鑺傜偣selection銆俲oin鍙互鏍规嵁缁戝畾鐨勬暟鎹疄鐜癳nter銆乽pdate銆乪xit鍔熻兘锛屾洿绮剧粏鍦版帶鍒秙election鐨勫疄闄呮晥鏋溿€俥nter鑾峰彇杈撳叆鐨剆electionselection.exit鑾峰彇閫€鍑虹殑selectionselection.datum鑾峰彇/璁剧疆鑺傜偣鏁版嵁銆傛洿澶欰PI璇峰弬鑰冨畼鏂规枃妗?.2銆傞摼寮忚皟鐢ㄤ负浜嗘柟渚胯捣瑙侊紝D3鏀寔閾惧紡璋冪敤銆傚涓夾PI鎵€绀猴紝D3鍒嗕负涓ょ被methods锛歞3.select/d3.selectionAlld3.selection.functionandothers锛堝悗闈細璁插埌锛夈€傚洜姝わ紝鎴戜滑蹇呴』鏈変竴涓€夋嫨瀵硅薄鎵嶈兘浣跨敤鍏朵粬鎿嶄綔鏂规硶銆傚锛歞3.select('div').append('svg').attr('width',100).attr('height',100)2.3銆傞渶瑕佹敞鎰忕殑鏄紝鍧愭爣绯荤粯鍒跺湪D3.js涓殑svg涓紝鍧愭爣鍘熺偣鍦ㄥ乏涓婅銆?.瀹炴垬3.1.绗竴姝モ€斺€斿垱寤簊vg鍒涘缓涓€涓楂樹负400x33鐨剆vgconstwidth=400constheight=33constsvg=d3.create("svg").attr("width",width).attr("height",height).attr("viewBox",`0-20${width}33`);3.2.绗簩姝モ€斺€旂敓鎴愰殢鏈哄瓧绗﹀畾涔変竴涓嚱鏁版潵鐢熸垚闅忔満瀛楃銆傚涓嬫墍绀猴紝鎴戜滑鐢熸垚鏈€澶?6涓ぇ鍐欏瓧姣嶇殑闅忔満瀛楃銆備唬鐮佸涓嬶細functionrandomLetters(){returnd3.shuffle('ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')).slice(0,Math.ceil(Math.random()*26)).sort()}sofar姣旇緝绠€鍗曘€?.3銆佺涓夋鈥斺€旀洿鏂板瓧绗︿覆鏍规嵁鐢熸垚鐨勯殢鏈哄瓧绗﹀皢鏁版嵁缁戝畾鍒板搴旂殑鑺傜偣銆傚叾涓紝鎴戜滑璁剧疆鏂板銆佹洿鏂般€佸垹闄よ妭鐐圭殑棰滆壊涓猴細缁胯壊銆佺孩鑹层€侀噾鑹瞔onstt=svg.transition().duration(750);svg.selectAll("text")//缁戝畾鏁版嵁銆俤ata(randomLetters(),d=>d).join(//璁剧疆鏂板瓧绗nter=>enter.append("text")//璁剧疆color.attr("fill","green")//璁剧疆position.attr("x",(d,i)=>i*16).attr("y",-30)//璁剧疆瀛楃鍒皀ode.text(d=>d).call(enter=>enter.transition(t).attr("y",0)),//璁剧疆鏇存柊鍚庣殑瀛楃update=>update.attr("fill","red").attr("y",0).call(update=>update.transition(t).attr("x",(d,i)=>i*16)),//璁剧疆鍒犻櫎鐨勫瓧绗xit=>exit.attr("fill","gold").call(exit=>exit.transition(t).attr("y",30).remove()));褰撶劧杩欓噷鐨勪唬鐮佹瘮杈冮暱锛岀悊瑙ｆ垚鏈瘮杈冮珮锛屾垜浠彲浠ュ舰鎴愬嚑涓棶棰橈紝灏濊瘯閫氳繃瑙ｉ鏉ョ悊瑙ｄ粬銆?.3.1.涓轰粈涔堟垜鍙互鍦ㄦ枃鏈妭鐐逛箣鍓嶈皟鐢╯electAll锛熷垰寮€濮嬪涔燚3.js鐨勬椂鍊欐垜涔熸兂杩囪繖涓棶棰樸€傚悗鏉ョ炕浜嗕笅鐩稿簲鐨勬簮鐮侊紝瑙夊緱鍙互鎼炲畾銆傚涓嬪浘锛屾垜浠彲浠ョ湅鍒拌皟鐢╯electAll鏃讹紝瀹為檯涓婅繑鍥炵殑鏄竴涓猄election瀵硅薄銆備紶鍏ョ殑閫夋嫨鍣ㄤ細琚帴鍙椾负绗竴涓弬鏁帮紝绗簩涓弬鏁版槸榛樿鐨刣ocument.documentElement銆備粠鈥?/array.js鈥濆鍏ユ暟缁勶紱浠庘€?/selection/index.js鈥濆鍏Selection锛宺oot}锛涘鍑洪粯璁ゅ嚱鏁帮紙閫夋嫨鍣級{杩斿洖绫诲瀷閫夋嫨鍣?==鈥滃瓧绗︿覆鈥濓紵newSelection([document.querySelectorAll(selector)],[document.documentElement]):newSelection([array(selector)],root);}鐒跺悗瀵硅薄鏈韩浼氫繚瀛樹袱涓弬鏁板埌涓や釜鍙橀噺_groups鍜宊parents涓紝濡傚鍥炬墍绀猴細exportfunctionSelection(groups,parents){this._groups=groups;this._parents=parents;}鎵€浠ヨ繖涓€姝ユ湰韬彧鏄敓鎴愪竴涓猄election鐨勫疄渚嬶紝骞跺皢閫夋嫨鍣ㄥ強鍏剁埗鑺傜偣缁戝畾鍒拌繖涓疄渚嬨€傞偅涔堥棶棰樻潵浜嗭細杩欎竴姝ヨ兘涓嶈兘鐢╯elect鍑芥暟浠ｆ浛鍛紵绛旓細涓嶆槸锛屽洜涓簊elect鍜宻electAll鍑芥暟鐨勫尯鍒湪浜庡墠鑰呰皟鐢╠ocument.querySelector锛岀粨鏋滆繑鍥炰竴涓璞★紱鍚庤€呰皟鐢╠ocument.querySelectorAll锛岀粨鏋滆繑鍥炰竴涓€滄暟缁勨€濄€傞偅涔堟渶缁堢殑鏁版嵁缁撴瀯鍏朵腑涓€涓槸瀵硅薄锛屽彟涓€涓槸浜岀淮鏁扮粍銆傛渶鐩存帴鐨勮〃鐜板氨鏄浛鎹㈠悗绋嬪簭浼氱珛鍗虫姤閿檦闄や簡selectAll鍙互鐢ㄥ叾浠栧嚱鏁板悧锛熺瓟锛氫笉闇€瑕侊紝铏界劧鏈川涓婂彧闇€瑕佽幏鍙栦竴涓猄electon瀵硅薄骞剁粦瀹氭暟鎹紝浣嗙洰鍓岲3.js骞舵病鏈夌洿鎺ュ澶栨毚闇茶繖涓姛鑳姐€傜患涓婃墍杩帮紝鎴戜滑鍙兘閫氳繃selectAll鏉ヨ幏鍙朣election瀵硅薄锛屽嵆浣垮湪娌℃湁棰勫厛鐢熸垚鑺傜偣鐨勬儏鍐典笅璋冪敤锛岀湅璧锋潵涔熷緢鍒壄馃槩銆?.3.2.鏁版嵁鍑芥暟鏄浣曞疄鐜版暟鎹粦瀹氱殑锛熸彁鍒拌繖涓棶棰橈紝涓€瀹氳鐪媎ata鍑芥暟鐨勫唴閮ㄥ疄鐜帮細data浼氭牴鎹紶鍏ョ殑key杩涜缁戝畾锛岃皟鐢╞indKey鍑芥暟锛涘惁鍒欙紝灏嗚皟鐢╞indIndex鍑芥暟銆俠indIndex瀛樻斁update銆乪nter銆乪xit鏁扮粍涓殑鑺傜偣锛宐indKey浼犲叆鐨刱ey鍦╡xit鏁扮粍涓槸涓€涓嚱鏁帮紝鐢熸垚鐨刱eyValue鐢ㄤ簬瀛樻斁update銆乪nter銆乪xit鏁扮粍涓殑鑺傜偣銆傚€煎緱娉ㄦ剰鐨勬槸锛屽鏋滈渶瑕佸鏇存柊闃舵鍋氬鐞嗭紙姣斿鍔ㄧ敾锛夛紝閭ｄ箞浼犻€掔殑key灏卞緢閲嶈浜嗐€傚洜涓哄鏋滈粯璁や紶绱㈠紩鐨勮瘽锛屽嵆浣挎洿鏂颁簡鑺傜偣锛屾洿鏂板嚱鏁颁篃涓嶄竴瀹氫細琚Е鍙戙€傝繑鍥炰竴涓柊鐨勯€夋嫨瀵硅薄瀵煎嚭榛樿鍑芥暟锛堝€硷紝閿級{if锛堬紒arguments.length锛塺eturnArray.from锛坱his锛宒atum锛?鍙橀噺缁戝畾=閿紵bindKey:bindIndex,parents=this._parents,groups=this._groups;if(typeofvalue!=="鍑芥暟")value=constant(value);瀵逛簬(varm=groups.length,update=newArray(m),enter=newArray(m),exit=newArray(m),j=0;j
