浠嬬粛濡備笅LearnD3:Animation绗竷绡囷紝浠呬负鑻辨枃缈昏瘧锛屽彲淇敼閮ㄥ垎鏇挎崲涓洪潤鎬佸浘鐗囷紝濡傞渶璇烽槄璇诲師鏂囧疄鏃朵簰鍔ㄣ€傚師鏂囷細LearnD3:Joins鐗堟湰锛?020骞?鏈?4鏃ュ彂甯僌riginMyGitHubText濡傛灉鎮ㄧ啛鎮夋湰鏁欑▼涓殑D3锛屾偍鍙兘浼氭儕璁朵簬D3閫夋嫨鍣ㄧ殑鎻愬強濡傛涔嬪皯銆傞偅鏄洜涓轰綘鍙兘涓嶉渶瑕佸畠浠紒D3閫夋嫨鍣ㄥ簲鐢ㄤ竴涓壒娈婄殑鏂瑰悜锛氬姩鎬佸浘琛ㄧ殑蹇€熷閲忔洿鏂般€傚鏋滄偍鍏冲績闈欐€佸浘锛屾垨鑰呮瘡甯ч兘鍙互浠庡ご寮€濮嬮噸鏂扮粯鍒剁殑鍥撅紝閭ｄ箞鎮ㄥ彲鑳芥洿鍠滄涓嶅悓鐨勬娊璞°€傚彟涓€鏂归潰锛屽鏋滀綘鎯冲姩鐢昏浆鎹㈡垨鎸ゅ嚭鐜颁唬娴忚鍣ㄧ殑鏈€浣虫€ц兘锛岄€夋嫨鍣ㄩ€傚悎浣犮€傦紙鍗充娇鎮ㄥ喅瀹氫笉浣跨敤閫夋嫨鍣紝璇疯浣廌3鏈夊ぇ閲忓叾浠栨湁鐢ㄧ殑鍙鍖栧伐鍏枫€傛瘮渚嬨€佸舰鐘躲€佹彃鍊煎櫒銆侀鑹层€佸湴鍥炬姇褰卞拰璁稿鍏朵粬鍔熻兘鍙敤浜嶤anvas銆乄ebGL鎴栧叾浠朌OM鎶借薄锛屽Observable鐨凥TML鏍囪妯℃澘鏂囧瓧銆丷eact鎴朣velte銆侱3杩樺彲浠ヤ娇鐢ㄧ粺璁°€佸垎缁勫拰鑱氬悎銆佹椂闂村簭鍒楀拰瑙ｆ瀽鏉ュ崗鍔╂暟鎹竻鐞嗗拰鍒嗘瀽銆傦級鏈川涓婏紝D3閫夋嫨鍣ㄦ寚瀹氳浆鎹㈣€屼笉鏄〃绀恒€傛偍鍙互鎸囧畾涓哄皢褰撳墠鐘舵€佽浆鎹负鎵€闇€鐘舵€佽€岃繘琛岀殑鏇存敼锛堟彃鍏ャ€佹洿鏂板拰鍒犻櫎锛夛紝鑰屼笉鏄〃绀哄浘琛?DOM)鐨勬墍闇€鐘舵€併€傝繖鏈夋椂寰堜箯鍛筹紝浣嗗厑璁告偍璁剧疆鍔ㄧ敾杞崲骞舵渶澶ч檺搴﹀湴鍑忓皯瀵笵OM鐨勬洿鏀癸紝浠庤€屾彁楂樻€ц兘銆傝鎴戜滑鐪嬬湅濡備綍銆傚亣璁炬垜浠鏄剧ず瀛楁瘝琛ㄤ腑鐨勫瓧姣嶃€傝櫧鐒朵笉鏄緢鐩磋锛屼絾鎴戜滑浼氫繚鎸佺畝鍗曪紝涓撴敞浜庢妧鏈紙鏈夊叧瀹為檯绀轰緥锛岃鍙傞槄D3鐢诲粖鐨勫姩鐢诲拰浜や簰閮ㄥ垎銆傦級姝ゅ浘鏄潤鎬佺殑锛屽洜涓哄畠鏄瘡娆″崟鍏冭繍琛屾椂浠庡ご寮€濮嬪垱寤虹殑锛岃繖浣垮緱D3浠ｇ爜鏈川涓婄瓑鍚屼簬HTML鏂囨湰銆傞偅涔堬紝涓轰粈涔堣浣跨敤閫夋嫨鍣ㄥ憿锛熸槸鐨勶紝瀵逛簬闈欐€佸浘锛屽嚑涔庢病鏈夌悊鐢辫繖鏍峰仛銆備絾鏄亣璁炬偍鎯宠鏇存柊姝ゅ浘琛ㄤ互鍝嶅簲涓嶆柇鍙樺寲鐨勬暟鎹€傝€屼笖鎮ㄤ笉鎯充粠澶村紑濮嬮噸缁橈紝鎮ㄥ笇鏈涘簲鐢ㄦ渶灏忕殑涓€缁勬洿鏂版潵鍙嶆槧鏂版暟鎹€傛偍鎯宠閲嶇敤鐜版湁鍏冪礌锛屾坊鍔犻渶瑕佺殑鍏冪礌锛屽垹闄や笉闇€瑕佺殑鍏冪礌銆傚彧闇€灏嗕笂闈㈢殑浠ｇ爜绉诲姩鍒版暟鎹彉鍖栨椂璋冪敤鐨勬柟娉曚腑锛屼綘灏卞彲浠ヨ幏寰楅珮鎬ц兘鐨勫閲忔洿鏂帮紒馃槻璁╂垜浠垎鏋愪竴涓嬩唬鐮併€倀ext鏄枃鏈厓绱犵殑鏁扮粍锛屾渶鍒濅负绌猴紝鍏剁埗鍏冪礌鏄疭VG鍏冪礌銆傛鐖堕」纭畾绋嶅悗灏嗗湪浣曞闄勫姞杈撳叆鐨勬枃鏈厓绱犮€傞€氳繃璋冪敤selection.data锛屾枃鏈缁戝畾鍒颁竴涓柊鐨勬暟鎹暟缁刲etters銆傝繖鏍蜂細璁＄畻鍑烘枃鏈€夋嫨闆嗙殑涓変釜瀛愰泦锛歟nter閫夋嫨闆嗕唬琛ㄦ柊鏁版嵁涓幓鎺夊凡鏈夊厓绱犲拰鏂版暟鎹殑浜ら泦鍚庡墿涓嬬殑鏁版嵁锛涙洿鏂伴€夋嫨闆嗚〃绀烘柊鏁版嵁鍜岀幇鏈夊厓绱犵殑浜ら泦锛沞xit閫夋嫨闆嗚〃绀哄幓闄ゅ凡鏈夊厓绱犵殑浜ら泦鍚庡墿涓嬬殑鍏冪礌鍜屽凡鏈夊厓绱犱腑鐨勬柊鏁版嵁銆備妇涓緥瀛愶細锛堣繖浜涢€夋嫨闅愯棌鍦ㄤ唬鐮佷腑锛歴election.data杩斿洖鏇存柊鐨勯€夋嫨锛屼綘鍙互浠庝腑璋冪敤selection.enter鎴杝election.exit鏉ヨ闂叾浠栭€夋嫨銆傦級鎴戜滑鍙互鎵嬪姩澶勭悊杩欎笁绉嶆儏鍐碉紝浣嗘槸selection銆傚姞鍏ュ彲浠ユ柟渚垮湴澶勭悊銆傛坊鍔犱簡杈撳叆閫夋嫨锛涚Щ闄ら€夋嫨锛涙渶鍚庯紝鏇存柊鍜岃緭鍏ラ€夋嫨琚悎骞躲€佹帓搴忓苟杩斿洖銆傜劧鍚庢垜浠彲浠ュ皢灞炴€у拰鏂囨湰鍒嗛厤缁欒繖浜涜繛鎺ユ垨鏇存柊鍏冪礌銆傛垜浠瀵熷埌鍙瀛楁瘝鍜屾枃鏈厓绱犱箣闂寸殑鍏宠仈淇濇寔涓嶅彉锛屾洿鏂板厓绱犳椂鈥嬧€嬩笉闇€瑕侀噸鏂板垎閰嶆煇浜涘睘鎬у拰鏂囨湰鍐呭灏卞彲浠ユ洿楂樻晥銆備负浜嗕繚鎸佽繖绉嶅叧鑱旓紝selection.data闇€瑕佷竴涓叧閿嚱鏁帮紱瀵逛簬enter銆乽pdate銆乪xit銆乻election.join鐨勭簿纭搷浣滐紝闇€瑕佺浉搴旂殑鍑芥暟銆傚鏋渦pdate姣攅nter鍜宔xit鏇村父瑙侊紝杩欏皢澶уぇ鎻愰珮鎬ц兘锛佸拰浠ュ墠涓€鏍凤紝selection.join杩斿洖杈撳叆鍜屾洿鏂伴€夋嫨鐨勫悎骞堕泦锛屽洜姝ゆ垜浠彲浠ュ叡浜€傜敤浜庝袱鑰呯殑浠ｇ爜锛屼緥濡傝缃畑灞炴€с€備紶閫掔粰selection.data鐨刱ey鍑芥暟鐢ㄤ簬璁＄畻姣忎釜鏂版暟鎹拰閫変腑鍏冪礌鏁版嵁鐨勶紙瀛楃涓诧級閿紝纭畾鍝簺鏁版嵁缁戝畾鍒板摢涓厓绱狅細濡傛灉鍏冪礌鍜屾暟鎹叿鏈夌浉鍚岀殑閿紝鍒欐暟鎹粦瀹氬埌鍏冪礌锛屽苟灏嗚鍏冪礌鏀惧叆鏇存柊閫夋嫨闆嗕腑銆傚瓧姣嶆槸寰堝ソ鐨勯敭锛屾墍浠ユ亽绛夊嚱鏁?d=>d)鍦ㄨ繖閲屽緢鍚堥€傘€傦紙濡傛灉娌℃湁鎸囧畾閿嚱鏁帮紝鏁版嵁鐢辩储寮曠粦瀹氾細绗竴涓暟鎹粦瀹氬埌绗竴涓厓绱狅紝渚濇绫绘帹銆備綔涓虹粌涔狅紝灏濊瘯閲嶅啓涓婇潰鐨勪唬鐮佷互鎸夌储寮曡繛鎺ャ€傛偍杩橀渶瑕佸皢璁剧疆x灞炴€т笌璁剧疆鏂囨湰鍐呭浜掓崲锛侊級浣嗘槸锛岄€夋嫨鍣ㄧ湡姝ｉ棯鑰€鐨勫湴鏂规槸杩囨浮锛佲湪涓嬮潰锛屽瓧姣嶄粠椤堕儴杩涘叆锛屾按骞虫粦鍔ㄦ洿鏂帮紝浠庡簳閮ㄩ€€鍑恒€傝繖姣斾笂闈㈢殑鐬椂杞崲鏇村鏄撶悊瑙ｃ€傝壇濂界殑杩囨浮涓嶄粎浠呰鍥捐〃鈥滆烦鑸炩€濅互寮曡捣娉ㄦ剰锛涘畠浠府鍔╂煡鐪嬭€呬簡瑙ｆ暟鎹浣曢€氳繃绉诲姩鍙戠敓鍙樺寲銆傝壇濂界殑杩囨浮浣垮璞′繚鎸佷笉鍙橈細鍦ㄨ繃娓′箣鍓嶄唬琛ㄧ壒瀹氫簨鐗╋紙渚嬪瀛楁瘝C锛夌殑鍥捐〃鍏冪礌鍦ㄦ暣涓繃娓℃湡闂村拰涔嬪悗閮藉簲浠ｈ〃鐩稿悓鐨勪簨鐗╋紝浠ュ厑璁告煡鐪嬭€呬繚鎸佽窡韪€傜浉鍙嶏紝濡傛灉缁欏畾鍏冪礌鐨勫惈涔夊湪杞崲杩囩▼涓彂鐢熷彉鍖栵紝閭ｄ箞绉诲姩灏嗘鏃犳剰涔夈€備妇涓洿瀹為檯鐨勪緥瀛愭€庝箞鏍凤紵涓嬪浘鏄剧ず浜嗙壒瀹氬勾榫勭粍锛堜互鍙婂崕鐩涢】鐗瑰尯澶栧湴灞呮皯锛変汉鍙ｇ櫨鍒嗘瘮鎺掑悕鍓嶅崄鐨勫窞銆傝繖琛ㄦ槑鐘逛粬宸炵殑骞磋交浜哄彛姣斾緥杩囬珮锛屽弽鏄犲嚭LDS鏁欎細瀵瑰吇瀹剁硦鍙ｇ殑閲嶈銆傜浉姣斾箣涓嬶紝浣涚綏閲岃揪宸炵殑閫€浼戜汉鍙ｄ紬澶氾紝鍏朵腑璁稿浜虹殑骞撮緞鍦?0宀佹垨浠ヤ笂銆傚綋鎮ㄦ洿鏀归€夊畾鐨勫勾榫勭粍鏃讹紝璇锋敞鎰忓浘琛ㄥ浣曢噸鏂版帓搴忎互鍙嶆槧鎺掑悕鐨勫彉鍖栥€倄杞村悓鏃堕噸鏂扮缉鏀句互閫傚簲鏂版暟鎹€俢hart={constsvg=d3.create("svg").attr("viewBox",[0,0,width,height]);console.info(data)//瀵逛簬鍒濆娓叉煋锛岄潪鍙嶅簲鎬у湴寮曠敤褰撳墠骞撮緞銆俢onstagedata=viewofagedata.value;constx=d3.scaleLinear().domain([0,d3.max(agedata,d=>d.value)]).rangeRound([margin.left,width-margin.right]);consty=d3.scaleBand().domain(agedata.map(d=>d.name)).rangeRound([margin.top,margin.top+20*data.names.length]);璁゜ar=svg.append("g").attr("fill","steelblue").selectAll("rect").data(agedata,d=>d.name).join("rect").style("mix-blend-mode","multiply").attr("x",x(0)).attr("y",d=>y(d.name)).attr("width",d=>x(d.value)-x(0)).attr("height",y.bandwidth()-1);constgx=svg.append("g").call(xAxis,x);constgy=svg.append("g").call(yAxis,y);杩斿洖Object.assign(svg.node(),{鏇存柊(agedata){constt=svg.transition().duration(750);gx.transition(t).call(xAxis,x.domain([0,d3.max(agedata,d=>d.value)]));gy.transition(t).call(yAxis,y.domain(agedata.map(d=>d.name)));bar=bar.data(agedata,d=>d.name).call(bar=>bar.transition(t).attr("width",d=>x(d.value)-x(0))銆傚睘鎬э紙鈥測鈥濓紝d=>y锛坉.name锛夛級锛?}});}鍙湁鍓?0涓煴褰㈠彲瑙侊紝鍥犱负鍏朵綑鏌卞舰闅愯棌鍦ㄥ浘琛ㄤ笅鏂广€傚洜姝わ紝涓嶉渶瑕乻election.join锛屽洜涓烘病鏈夋坊鍔犳垨鍒犻櫎鏌憋紝瀹冧滑鍙槸琚洿鏂般€傝繖涓嶄粎绠€鍖栦簡浠ｇ爜锛岃€屼笖浣胯浆鎹㈡洿鏈夋剰涔夛紝鍥犱负鐜板湪杩涘叆鎴栭€€鍑烘潯褰㈢殑閫熷害鏆楃ず浜嗗畠浠湪鏄剧ず涔嬪鐨勪綅缃€傚姩鐢昏繃娓￠€氬父鐢辫鑰呭湪瀵绘壘绛旀鏃剁偣鍑绘垨鐐瑰嚮瑙﹀彂銆傛帴涓嬫潵锛岃鎴戜滑鐪嬬湅濡備綍璁╁浘琛ㄥ搷搴旀绫绘煡璇€侼extappendix鏍规嵁婧愮爜鍘婚櫎骞冲彴渚濊禆锛屾彁鍙栦富瑕佷唬鐮併€傛湁浠ヤ笅渚嬪瓙锛欵xample1Example2ReferencesLearnD3:Joins
