浠嬬粛濡備笅LearnD3:Data绗洓閮ㄥ垎锛屼粎涓鸿嫳鏂囩炕璇戯紝鍙慨鏀归儴鍒嗘浛鎹负闈欐€佸浘鐗囷紝濡傞渶浜掑姩璇烽槄璇诲師鏂囧疄鏃躲€傚師鏂囷細LearnD3:Scales鐗堟湰锛?020骞?鏈?4鏃ュ彂甯僌riginMyGitHubText鍦―3鏁版嵁鍥惧舰鐨勬墍鏈夊伐鍏蜂腑锛屾渶鍩烘湰鐨勬槸姣斾緥灏猴紝瀹冨皢鏁版嵁鐨勬娊璞＄淮搴︽槧灏勫埌瑙嗚鍙橀噺銆傝灏濊瘯涓€涓嬶紝璇锋煡鐪嬭繖涓皬锛堜絾缇庡懗锛侊級姘存灉鐨勬暟鎹泦銆傛垜浠€氬父璁や负缁村害鏄┖闂寸殑锛屾瘮濡備笁缁寸┖闂翠腑鐨勪綅缃紝浣嗘娊璞＄殑缁村害涓嶄竴瀹氭槸绌洪棿鐨勩€傚畠鍙互鏄畾閲忕殑锛屽氨鍍忎笂闈㈠姣忎釜姘存灉鐨勮鏁颁竴鏍枫€傛垨鑰呭畠鍙兘鏄悕涔変笂鐨勶紝渚嬪name銆傚湪SemiologyofGraphics涓紝JacquesBertin鎻忚堪浜嗙偣鍜岀嚎绛夊浘褰㈡爣璁板浣曗€滆〃绀哄樊寮傦紙鈮狅級銆佺浉浼兼€э紙鈮★級銆侀噺鍖栭『搴忥紙Q锛夋垨闈為噺鍖栭『搴忥紙O锛夛紝浠ュ強缁勩€佸眰娆℃垨鍨傜洿绉诲姩鈥滆〃绀衡€濆彲浠ヤ娇鐢ㄤ綅缃€佸ぇ灏忋€侀鑹茬瓑銆傝繖浜涘浘褰㈡爣璁板睘鎬ф槸鎴戜滑鐨勮瑙夊彉閲忋€傚儚璁稿鍙鍖栦竴鏍凤紝涓嬮潰鐨勬潯褰㈠浘灏嗕袱涓娊璞＄淮搴︽槧灏勫埌涓や釜瑙嗚鍙橀噺锛氬悕绉扮淮搴︽槧灏勫埌鏉″舰鍥剧殑y浣嶇疆,count缁村害鏄犲皠鍒皒浣嶇疆銆傝繖浜涙槧灏勬槸閫氳繃涓嬮潰鐨剎鍜寉灏哄害鏉ュ疄鐜扮殑銆傦紙闅忔剰缂栬緫浠ｇ爜锛岀湅鐪嬩細鍙戠敓浠€涔堬紒锛塂3灏哄害鏈夊嚑绉嶇被鍨嬶紝浣跨敤鍝竴绉嶅彇鍐充簬鎶借薄缁村害锛堝畾閲忔垨绗﹀彿锛燂級鍜岃瑙夊彉閲忥紙浣嶇疆鎴栭鑹诧紵锛夈€傝繖閲寈鏄嚎鎬у埢搴︼紝鍥犱负璁℃暟鏄畾閲忕殑锛屾潯褰㈤暱搴﹀簲涓庡€兼垚姣斾緥锛岃€寉鏄垎娈靛埢搴︼紝鍥犱负鍚嶇О鏄薄寰佹€х殑锛岄厭鍚у緢鍘氥€傛瘡涓昂搴﹂兘鏄€氳繃浠庢娊璞℃暟鎹紙鍩燂級鍒拌瑙夊彉閲忥紙鑼冨洿锛夌殑閰嶅鏉ラ厤缃殑銆備緥濡傦紝x-domain鐨勪笅闄愬€?0)鏄犲皠鍒皒-range鐨勪笅闄愬€硷紙鍥捐〃鐨勫乏杈圭紭锛夛紝domain鐨勪笂闄愬€硷紙鏈€澶ц鏁帮級鏄犲皠鍒皉ange鐨勪笂闄愬€硷紙鍙宠竟缂橈級).瀵逛簬绾挎€у昂搴︼紝domain鍜宺ang鏄繛缁殑闂撮殧锛堜粠鏈€灏忓埌鏈€澶э級銆傚浜庡垎娈靛昂搴︼紝鍩熸槸绂绘暎鍊兼暟缁勶紙馃崐銆侌煃囥€侌煃忋€佲€︼級锛岃寖鍥存槸杩炵画鑼冨洿锛涘垎娈垫瘮渚嬭嚜鍔ㄧ‘瀹氬浣曞皢鑼冨洿鍒掑垎涓虹鏁ｇ殑濉厖娈点€備笂闈㈢殑姣斾緥鏄娇鐢ㄦ柟娉曢摼閰嶇疆鐨勩€傝繖绉嶇畝娲佺殑椋庢牸鏄彲鑳界殑锛屽洜涓洪厤缃瘮渚嬬殑鏂规硶锛堜緥濡俿cale.domain锛夎繑鍥炴瘮渚嬨€傜瓑浠风墿鍐欏湪涓嬮潰銆傚鏋滆皟鐢ㄤ笉甯﹀弬鏁扮殑缂╂斁鏂规硶锛屼篃鍙互浣跨敤Scale鏂规硶妫€绱㈠畠浠殑鍏宠仈鍊笺€傝繖瀵逛簬鑾峰彇鏂版瘮渚嬫垨璋冭瘯寰堟湁鐢ㄣ€備粈涔堟槸D3绉わ紵涓€涓姛鑳姐€傝皟鐢ㄥ畠灏嗚繑鍥炲搴斾簬缁欏畾鎶借薄鍊硷紙濡俢ount锛夌殑瑙嗚鍊硷紙濡倄浣嶇疆锛夈€傛寜鐓ф儻渚嬶紝澶у鏁癉3鍥捐〃搴旂敤杈硅窛鏉ユ彃鍏ュ埢搴﹁寖鍥村苟涓鸿酱鐣欏嚭绌洪棿銆傚洜姝わ紝x(0)閫氬父涓嶄负闆讹紱杩欐槸宸﹁竟璺濈殑澶у皬銆傝繖浜涘昂搴﹁繑鍥炵殑xy浣嶇疆鏄竴涓偣锛屼緥濡俒x=640,y=30]銆備絾鐢变簬鏉″舰鍥句笉鏄棤闄愬皬锛屽畠浠湁瀹藉害鍜岄珮搴︼紝杩欎釜浣嶇疆瀵瑰簲浜庢潯褰㈠浘鐨勫彸涓婅銆傛潯褰㈢殑瀹藉害涓簒(count)-x(0)锛屽叾楂樺害鐢卞垎娈靛埢搴︾殑y.bandwidth()瀹氫箟銆傝鎴戜滑鏇磋繘涓€姝ワ紝鐪嬬湅姣斾緥灏烘槸濡備綍浣跨敤鐨勩€備笅闈㈡槸鍗曚釜鏌辩殑浠ｇ爜銆備笂闈㈢殑浠ｇ爜鏄疕TML鏍囪鐨勬ā鏉挎枃鏈紝Observable涓殑html\`鈥`鏄覆鏌揌TML鏍囪鐨勪究鎹锋柟寮忋€傚姩鎬佽〃杈惧紡锛屼緥濡傛潯鐨勫搴︼紝鍙互浣滀负${...}鏂囧瓧宓屽叆銆侶TML鏂囧瓧鐨勭湡姝ｉ瓟鍔涘湪浜庡祵鍏ョ殑琛ㄨ揪寮忓彲浠ユ槸DOM鍏冪礌锛岀敋鑷虫槸DOM鍏冪礌鏁扮粍锛佹墍浠ユ垜浠彲浠ラ€氳繃灏嗘暟鎹槧灏勫埌SVG鍏冪礌鏉ュ悓鏃剁敓鎴愭墍鏈夌殑鏉″舰鍥俱€傦紙杩欎簺宓屽琛ㄨ揪寮忎娇鐢╯vg\`鈥`-Observable鐨勬ā鏉挎枃瀛楋紝涓撻棬鐢ㄤ簬SVG鏍囪锛岃€屼笉鏄疕TML鏍囪锛屽洜涓篠VG鍏冪礌鏈夎嚜宸辩殑XML鍛藉悕绌洪棿銆傚浜庡閮⊿VG鍏冪礌锛屾偍鍙互浣跨敤svg\`鈥`鎴杊tml\`鈥`锛屼絾鍦ㄥ唴閮紝鐢变簬鍛藉悕绌洪棿锛孲VG鏂囧瓧鏄繀闇€鐨勩€傦級浣跨敤姣斾緥灏虹殑鍙︿竴涓緢濂界殑鐞嗙敱鏄疍3鎻愪緵浜嗘槑纭樉绀轰綅缃瘮渚嬪昂缂栫爜鐨勮酱锛屼互鍙婃紓浜殑銆佷汉绫诲彲璇荤殑姣斾緥灏恒€傚潗鏍囪酱鎻愰珮浜嗗浘琛ㄧ殑鍙鎬у苟甯姪鎮ㄨ繘琛屼氦娴併€侱3杞撮渶瑕侀€夋嫨鍣紝鍒扮洰鍓嶄负姝㈡垜浠凡缁忛伩鍏嶄娇鐢ㄥ０鏄庢€TML妯℃澘鏂囧瓧銆備絾濡備笂鎵€绀猴紝涓よ€呭彲浠ュ拰璋愭惌閰嶃€傝娣诲姞杞达紝鎴戜滑棣栧厛浣跨敤svg\`...\`鍒涘缓涓€涓紙灏氭湭鍒嗙鐨勶級G鍏冪礌銆傜劧鍚庢垜浠€氳繃灏嗗畠浼犻€掔粰d3.select鏉ラ€夋嫨璇ュ厓绱犮€傜劧鍚庢垜浠皟鐢╯election.call涓€娆′互灏嗚酱娓叉煋鍒癎鍏冪礌涓紝鐒跺悗鍐嶆鍒犻櫎鍩熻矾寰勶紙鐢ㄤ簬鏈€灏忔牱寮忥級銆傛渶鍚庯紝鎴戜滑閫氳繃璋冪敤selection.node鑾峰彇G鍏冪礌骞跺皢鍏跺祵鍏ュ埌澶栭儴鏂囧瓧涓€備綅缃槸鏈€寮虹殑瑙嗚鍙橀噺锛屾墍浠ュ埌鐩墠涓烘鎴戜滑瀵规瘮渚嬬殑璁ㄨ閮介泦涓湪浣嶇疆涓婂苟闈炲阀鍚堛€備絾鏄紝姣斾緥灏哄彲鐢ㄤ簬鍏朵粬瑙嗚鍙橀噺锛屼緥濡傞鑹层€傪煂堜笂闈㈢殑浠ｇ爜瀹氫箟浜嗕竴涓猻equentialscale锛屽畠绫讳技浜庝竴涓猯inearscale锛屽彧鏄畠鐨勮寖鍥村彇鍐充簬interpolator銆傛彃鍊煎櫒鏄竴涓嚱鏁帮紝瀹冩帴鍙?鍒?涔嬮棿鐨勫€煎苟杩斿洖鐩稿簲鐨勮瑙夊€笺€傞€氬父锛屾鎻掑€煎櫒鏄疍3鐨勫唴缃厤鑹叉柟妗堜箣涓€銆備紶閫掕壊鏍囦細杩斿洖鐩稿簲鐨勯鑹插瓧绗︿覆銆傜幇鍦ㄦ垜浠彲浠ュ悜鏉″舰鍥炬坊鍔犻澶栫殑缂栫爜锛屽皢璁℃暟鏄犲皠鍒伴鑹蹭互鍙妜浣嶇疆銆備负浜嗚褰曢鑹茬紪鐮侊紝绫讳技浜庝綅缃紪鐮佽酱锛屾垜浠皢寮曞叆D3棰滆壊鍥句緥銆備竴浜涘彲瑙嗗寲闇€瑕佷笓闂ㄧ殑鍥惧舰鏍囪锛岃繖浜涙爣璁版病鏈夊唴缃埌SVG鎴朇anvas涓€傛帴涓嬫潵锛屾垜浠皢瓒呰秺鍩烘湰鐨勬潯褰㈠浘骞朵簡瑙3褰㈢姸銆備笅涓€绡囬檮褰曟牴鎹簮鐮佸幓闄ゅ钩鍙颁緷璧栵紝鎻愬彇涓昏浠ｇ爜銆傛湁浠ヤ笅渚嬪瓙锛氫緥1渚?渚?渚?渚?鍙傝€冭祫鏂橪earnD3:Scales
