涓€銆佸墠瑷€鍦ㄤ笂涓€绡囨枃绔犱腑锛屾垜浠畬鏁村湴瀹炵幇浜嗕竴涓洿鏂瑰浘锛屽苟鎻愬埌浜嗗埢搴︾殑姒傚康銆傛湰绡囨垜浠户缁涔燚3.js锛屼笉杩囨槸鐢ㄥ畠鏉ョ敾楗煎浘銆傚簾璇濅笉澶氳锛岀幇鍦ㄥ紑濮嬸煆?.姝ｆ枃2.1锛孉PI鍑芥暟鐢ㄦ硶d3.pie浣跨敤缁欏畾鐨勬暟鎹敓鎴愰ゼ鍥撅紝杩斿洖涓€涓璞℃暟缁刣3.arcArcGenerator2.2銆傜粯鍒跺渾寮ф彁鍒癲3.arc鏄竴涓渾寮х敓鎴愬櫒銆備緥濡傦細constarc=d3.arc().innerRadius(0).outerRadius(100).startAngle(0).endAngle(Math.PI/2);寮э紙锛?//"M0,-100A100,100,0,0,1,100,0L0,0Z"鎴戜滑鍙互鐪嬪埌鏈€鍚巃rc()杩斿洖杩欐牱涓€涓茬粨鏋滐細"M0,-100A100,100,0,0,1,100,0L0,0Z"馃閭ｄ箞杩欎覆缁撴灉鏄粈涔堟剰鎬濆憿锛熸垜浠皢杩欎覆缁撴灉鍒嗚В涓哄涓嬪懡浠わ細缁勫悎涓猴細灏嗗綋鍓嶄綅缃Щ鍔ㄥ埌$(0,-100)$锛屾牴鎹綋鍓嶄綅缃敾涓€鏉℃き鍦嗘洸绾匡紝鍏?rx$鍜?ry$閮芥槸$100$锛岀粨鏉熶綅缃负$(100,0)$銆傜粨鏋滄槸缁樺埗浜嗕竴涓?1/4$鍦嗐€傚彲浠ユ兂璞★紝鎴戜滑灏嗕娇鐢ㄦ灞炴€ф潵缁樺埗鎴戜滑鐨勯ゼ鍥俱€?.3.鐢婚ゼ鍥鹃鍏堟垜浠敓鎴愪竴涓暟缁勶紝闅忎究璁剧疆涓暟鑼冨洿constdata=Array.from({length:10}).map((v,i)=>i*100+10)鐒跺悗鍔犱笂svg&璁剧疆瀹瑰櫒constsvg=d3.select('#pie').append('svg').attr('width',600).attr('height',600).attr('class','svg')//Maketheviewcenter.attr('viewBox','-300-300600600')鐒跺悗鎴戜滑闇€瑕佸仛涓や欢浜嬶細閰嶇疆涓€涓渾寮х敓鎴愬櫒馃槓鈥嬧€嬫牴鎹暟鎹煒愮粍鍚堢敓鎴愭瘡涓暟鎹搴旂殑startAngle鍜宔ndAngle浠ヤ笂涓ゆ鐢熸垚楗煎浘馃憤鐒跺悗鎴戜滑涓婇潰璇村埌鍙互鐢╠3.arc鍜宒3.pie鏉ュ畬鎴愯繖涓や欢浜嬸煈嘽onstarcs=d3.pie()(data)constarc=d3.arc()銆俹uterRadius(100).innerRadius(0)svg.selectAll('path').data(arcs).enter().append('path').attr('d',arc)鏈€鍚庢垜浠緱鍒颁竴涓繁鑹查ゼ鍥攫煇?.4娣诲姞棰滆壊濡備笂鍥撅紝鎴戜滑鏈€缁堢殑楗煎浘娌℃湁棰滆壊锛岄偅鎬庝箞缁欏畠涓婅壊鍛紵涓€绉嶆柟娉曟槸鎴戜滑鑷繁鎵嬪姩閰嶈壊锛屼絾鏄繖涓湁鐐圭棝鑻︺€傚彟涓€绉嶆柟娉曟槸浣跨敤D3.js涓殑鍐呯疆鏂规硶鈥斺€攄3.schemePaired浠ｇ爜濡備笅锛歴vg.selectAll('path').data(arcs).enter().append('path').attr('d',arc).attr('fill',(d,i)=>d3.schemePaired[i])杩欐牱锛屾垜浠緱鍒颁竴涓紓浜殑楗煎浘馃惗2.5锛屾坊鍔犳敞瑙?.5.1锛屾暟鎹粨鏋勪负瑕佷负楗煎浘涓殑姣忎釜閮ㄥ垎娣诲姞鏍囩锛岄鍏堟垜浠渶瑕佺◢寰皟鏁存暟鎹粨鏋勶細constdatasets=[{name:'cat',value:100},{name:'dog',value:100},{name:'pig',value:100},{name:'cow',value:100},{name:'bird',value:100},{name:'fish',value:100},{name:'铔?锛屽€硷細100}锛寋鍚嶇О锛?鑰侀紶'锛屽€硷細100}锛寋鍚嶇О锛?鐚村瓙'锛屽€硷細100}锛寋鍚嶇О锛?澶ц薄'锛屽€硷細100}锛宂2.5.2銆侽KCoordinates涓轰簡淇濊瘉鎴戜滑鐢诲嚭涓€鏉″畬缇庣殑鎶樼嚎锛屾帴涓嬫潵鎴戜滑闇€瑕佺‘瀹氬嚑涓潗鏍囷細璧峰鍧愭爣缁撴潫鍧愭爣鏂囧瓧鍧愭爣D3.js鎻愪緵浜嗕竴涓嚱鏁扳€斺€攁rc.centroid锛岄€氳繃瀹冩垜浠彲浠ュ緱鍒板綋鍓嶆墖褰㈢殑涓棿鍧愭爣.浠ユ垜浠綋鍓嶇粯鍒剁殑楗煎浘涓轰緥锛屾垜浠皢杩欎簺鐐规爣璁颁负鐧借壊鍦嗗湀銆傚涓嬪浘馃憞鎴戜滑瑙傚療鍥句腑鐨勫師鐐癸紝缁撳悎鎺у埗鍙板彲浠ュ彂鐜帮紝楗煎浘宸︿晶鐨勭偣鐨勬í鍧愭爣鍖洪棿涓?x<0$锛岃€岄ゼ鍥惧彸渚х殑鐐规槸$x鈮?$銆傚洜姝わ紝鎴戜滑鍙互鎯冲嚭涓€涓粯鍒舵爣娉ㄧ殑閫昏緫锛氳捣鐐瑰潗鏍囷細arc.centroid缁堢偣鍧愭爣锛氶€氳繃褰撳墠鎵囧尯鐨刟rc.centroid娌垮渾蹇冪敾涓€鏉＄嚎锛屽叾闀垮害涓?r-arc.centroid璺濈鍦嗗績鐩寸嚎璺濈+offsetY$锛?offsetY$涓鸿嚜瀹氫箟鍋忕Щ閲忥級鏂囨湰鍧愭爣锛氫粠缁堢偣鍧愭爣寮€濮嬶紝妯潗鏍囧鍔?offsetX$锛?offsetX$涓鸿嚜瀹氫箟锛塷ffset)褰撶洰鏍囨墖鍖虹殑涓偣鍦?x$杞翠笂鏂规椂锛屽涓嬪浘锛氭垜浠妸A鐐逛綔涓烘墖褰㈢殑鈥滀腑鐐光€濓紝鏄撶煡锛?OD=cos鈭燗OB*OC$,$CD=sin鈭燗OB*OC$鍏朵腑锛?cos鈭燗OB=x/z$,$sin鈭燗OB=y/z$,$z=鈭?x^2+y^2)$褰撶洰鏍囨墖鍖虹殑涓偣鍦?x$杞翠笅鏂规椂锛屽涓嬪浘鎵€绀猴細姝ゆ椂锛?cos鈭燗OB=y/z$,$sin鈭燗OB=x/z$,$z=鈭?x^2+y^2)$2.5.3浠ｇ爜瀹炵幇鐭ラ亾鎬庝箞鐢讳箣鍚庯紝鎴戜滑鏉ュ啓浠ｇ爜鎵嬶紝棣栧厛缁樺埗鎶樼嚎馃憞constgeneratePolyline=selection=>{constoffsetY=10;甯告暟璺濈=r+50锛沜onstpoints=[]constr1=20//鐢熸垚鎶樼嚎selection.append('polyline').attr('class','polyline').attr('points',(d,i)=>{constcenterX=arc.centroid(d)[0]constcenterY=arc.centroid(d)[1]constcenterZ=Math.sqrt(Math.pow(centerX,2)+Math.pow(centerY,2))constoffsetX=getOffsetX(datasets[i].name)//褰撳墠鍦ㄧ涓€鍜岀鍥涜薄闄恑f(centerY<=0){constcos=Math.abs(centerX/centerZ)constsin=Math.abs(centerY/centerZ)constX=centerX>=0?cos*璺濈锛?cos*璺濈constY=-sin*璺濈points.push({[datasets[i].name]:[X,Y]})if(centerX>=0){return`${centerX},${centerY}${X},${Y},${X+offsetX},${Y}`}杩斿洖`${centerX},${centerY}${X},${Y},${X-offsetX},${Y}`}//褰撳湪绗簩銆佷笁璞￠檺涔嬪墠constcos=Math.abs(centerY/centerZ)constsin=Math.abs(centerX/centerZ)constX=centerX>0?sin*distance锛?sin*distanceconstY=cos*distancepoints.push({[datasets[i].name]:[X,Y]})if(centerX>0){return`${centerX},${centerY}${X},${Y},${X+offsetX},${Y}`}杩斿洖`${centerX},${centerY}${X},${Y},${X-offsetX},${Y}`}).attr('stroke','#6F68A7').attr('fill','none')}svg.selectAll('.path-group').call(generatePolyline)姝ゆ椂楗煎浘鍙戠敓鍙樺寲鐒跺悗鎴戜滑灏嗗墿浣欑殑浠ｇ爜娣诲姞鍒癵eneratePolyline鍑芥暟馃憞//娣诲姞鏂囨湰selection.append('text').attr('class','text').attr('x',(d,i)=>{const{name}=datasets[i]const[x]=points[i][name]if(x>0){returnx+5}returnx-getWordWidth(name)-5}).attr('y',(d,i)=>{const{name}=datasets[i]const[,y]=points[i][name]returny-offsetY}).attr('fill','#6F68A7').text((d,i)=>datasets[i].name).style('font-size','14px')//娣诲姞鐧惧垎姣攕election.append('text').attr('class','text').attr('x',(d,i)=>{const{name}=datasets[i]const[x]=points[i][name]constoffsetX=getOffsetX(name)if(x>0){returnx+offsetX+r1-10}杩斿洖x-offsetX-r1-10}).attr('y',(d,i)=>{const{name}=datasets[i]const[,y]=points[i][name]returny+4}).attr('fill','#6F68A7').style('font-size','12px').text((d,i)=>{constsum=datasets.reduce((acc,cur)=>acc+cur.value,0)return`${datasets[i].value/sum*100}%`})//鍔犵偣selection.append('circle').attr('class','circle').attr('cx',(d,i)=>{const{name}=datasets[i]const[x]=points[i][name]constoffsetX=getOffsetX(name)if(x>0){returnx+offsetX+r1}returnx-offsetX-r1})銆俛ttr('cy',(d,i)=>{const{name}=datasets[i]const[,y]=points[i][name]returny}).attr('r',r1).attr('fill','none').attr('stroke','#6F68A7')鍒锋柊椤甸潰鍚庯紝鎴戜滑鍙互鐪嬪埌涓€涓甫鏈夊畬鏁存爣绛剧殑楗煎浘銆?.6娣诲姞鍔ㄧ敾鍙互浣跨敤attrTween鍑芥暟娣诲姞鍔ㄧ敾Effect锛屾帶鍒跺姩鐢婚€熷害銆佹椂闀垮拰灞炴€у彉鍖栵紝瀹炵幇澶嶆潅鐨勫彉鍖栵紝瀹炵幇绮剧‘鐨勬帶鍒舵晥鏋溿€傚洜涓洪渶瑕佹坊鍔犵殑鍦版柟鎸哄鐨勶紝杩欓噷灏变笉涓€涓€灞曠ず浜嗭紝鐩存帴鐪嬫渶缁堟晥鏋滒煈囧畬鏁翠唬鐮佸弬鑰冿細[](https://github.com/pigpigever...)https://github.com/pigpigever...3.鎬荤粨鏈枃浠嬬粛浜嗗浣曚娇鐢―3.js缁樺埗楗煎浘锛屽苟璇︾粏璁茶В浜嗛ゼ鍥剧殑缁樺埗鍘熺悊锛屼互鍙婇渶瑕佺殑鍩烘湰姝ラ缁樺埗杩囩▼锛屼粠缁樺埗搴曢儴鍦嗗舰寮€濮嬶紝鐒跺悗缁樺埗鎵囧舰锛屾坊鍔犳敞閲婏紝鏈€鍚庢坊鍔犲姩鐢绘晥鏋溿€傛兂浜嗚В鏇村鍓嶇鐭ヨ瘑锛屾杩庡叧娉ㄦ垜鐨勫叕浼楀彿锛歍ony鑰佸笀鐨勫墠绔ˉ涔犵彮鍙傝€冭祫鏂欙細[](https://developer.mozilla.org...)https://developer.mozilla.org...
