Urara-Blog/build/_app/immutable/pages/2022-07-23-d3.md-e132e48a 2.js

import{S as uD,i as AD,s as CD,C as Hc,w as _D,x as hD,y as mD,z as LD,A as Xi,f as xD,t as bD,B as wD,X as Yi,l as o,r as e,a as c,V as d,m as F,n,u as t,h as l,c as E,W as v,p as y,b as r,G as a,E as kD}from"../chunks/index-cd58b8d1.js";import{P as SD}from"../chunks/post_layout-9085e57e.js";import"../chunks/posts-c52cb603.js";import"../chunks/title-765c989f.js";import"../chunks/index-81c83cec.js";import"../chunks/post_card-e7f4525a.js";import"../chunks/posts-57ab4794.js";import"../chunks/icon-3aa13b39.js";import"../chunks/head-4a058b17.js";import"../chunks/footer-1abd9501.js";function ID(Zs){let i,m,u,os,D,A,k,Lp,gs,Fs,xp,qF,ns,sl,bp,RF,f,wa,U,wp,kp,ll,B,Sp,S,ka,T,Ip,Gp,Sa,P,Vp,Op,Ia,q,jp,Hp,Ga,R,Up,Bp,Va,z,Tp,Pp,Oa,W,qp,Rp,ja,M,zp,Wp,Ha,$,Mp,zF,ps,al,$p,WF,es,ol,Np,MF,_,ts,Ua,Kp,Qp,rs,Ba,Jp,Xp,Ta,Yp,Zp,Fl,Pa,gp,qa,Ra,se,le,nl,za,ae,cs,Wa,oe,Fe,Ma,ne,pe,pl,$a,ee,Es,Na,te,re,Ka,ce,$F,Qa,gi=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> anchor </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> d3</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">select</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">a</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div></code></div></pre>`,Ja,el,Ee,NF,ys,tl,ye,KF,rl,N,ie,QF,K,is,Xa,De,de,I,Ya,ve,fe,Za,ue,Ae,Ds,Ce,ga,_e,he,me,cl,so,Le,xe,JF,El,ds,be,lo,we,ke,XF,yl,Se,YF,ao,sD=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">body</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">ul</span><span style="color: #89DDFF">&gt;&lt;/</span><span style="color: #F07178">ul</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #89DDFF">  &lt;</span><span style="color: #F07178">script</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> dataset </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> [</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">a</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">b</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">c</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">]</span></div><div class='line'><span style="color: #EEFFFF">    d3</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">select</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">ul</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">selectAll</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">li</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">data</span><span style="color: #EEFFFF">(dataset)</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">enter</span><span style="color: #EEFFFF">()</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">append</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">li</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">text</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">New item</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">script</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">body</span><span style="color: #89DDFF">&gt;</span></div></code></div></pre>`,oo,vs,il,Ie,ZF,Dl,Ge,gF,dl,vl,Fo,Ve,Oe,sn,no,lD=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">body</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #89DDFF">  &lt;</span><span style="color: #F07178">script</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> dataset </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> [</span><span style="color: #F78C6C">12</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">31</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">22</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">17</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">25</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">18</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">29</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">14</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">9</span><span style="color: #EEFFFF">]</span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF">    d3</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">select</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">body</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">      </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">selectAll</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">h2</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">      </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">data</span><span style="color: #EEFFFF">(dataset)</span></div><div class='line'><span style="color: #EEFFFF">      </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">enter</span><span style="color: #EEFFFF">()</span></div><div class='line'><span style="color: #EEFFFF">      </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">append</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">h2</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">      </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">text</span><span style="color: #EEFFFF">(d </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> d </span><span style="color: #89DDFF">+</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D"> USD</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">script</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">body</span><span style="color: #89DDFF">&gt;</span></div></code></div></pre>`,po,fs,fl,je,ln,ul,Al,eo,He,us,to,Ue,Be,ro,Te,an,co,aD=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'><span style="color: #EEFFFF">selection</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">style</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">color</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">blue</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">//\u7528\u56DE\u8C03\u8FC7\u6EE4</span></div><div class='line'><span style="color: #EEFFFF">selection</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">style</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">color</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> d </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #F07178">  </span><span style="color: #89DDFF">return</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">d</span><span style="color: #F07178"> </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178"> </span><span style="color: #F78C6C">20</span><span style="color: #F07178"> </span><span style="color: #89DDFF">?</span><span style="color: #F07178"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">red</span><span style="color: #89DDFF">'</span><span style="color: #F07178"> </span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">green</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #89DDFF">&#125;</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #546E7A">// \u52A8\u6001\u8BBE\u7F6E\u6837\u5F0F</span></div><div class='line'><span style="color: #EEFFFF">selection</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">style</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">height</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> d </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> d </span><span style="color: #89DDFF">+</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">px</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">) </span><span style="color: #546E7A">// \u52A8\u6001\u8BBE\u7F6E\u9AD8\u5EA6</span></div></code></div></pre>`,Eo,As,Cl,Pe,on,_l,hl,yo,qe,G,io,Re,ze,ml,We,Cs,Do,Me,$e,_s,Ne,vo,Ke,Qe,Je,fo,Xe,Fn,uo,oD=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'><span style="color: #EEFFFF">selection</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">class</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">container</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #546E7A">// \u56DE\u8C03</span></div><div class='line'><span style="color: #EEFFFF">selection</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">property</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">d</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> i</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;&#125;</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">// \u6BD4\u5982\u6539\u53D8\u95F4\u8DDD</span></div><div class='line'><span style="color: #EEFFFF">svg</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">selectAll</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">rect</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">data</span><span style="color: #EEFFFF">(dataset)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">enter</span><span style="color: #EEFFFF">()</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">append</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">rect</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">x</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">d</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> i</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #F07178">    </span><span style="color: #89DDFF">return</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">i</span><span style="color: #F07178"> </span><span style="color: #89DDFF">*</span><span style="color: #F07178"> </span><span style="color: #F78C6C">30</span><span style="color: #F07178"> </span><span style="color: #546E7A">//\u6539\u53D8\u95F4\u8DDD</span></div><div class='line'><span style="color: #F07178">  </span><span style="color: #89DDFF">&#125;</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">y</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">d</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> i</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #F07178">    </span><span style="color: #89DDFF">return</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">d</span><span style="color: #F07178"> </span><span style="color: #89DDFF">*</span><span style="color: #F07178"> </span><span style="color: #F78C6C">3</span><span style="color: #F07178"> </span><span style="color: #546E7A">//\u6539\u53D8\u9AD8\u5EA6</span></div><div class='line'><span style="color: #F07178">  </span><span style="color: #89DDFF">&#125;</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF">  </span><span style="color: #546E7A">//\u60AC\u505C\u6548\u679C</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">class</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">bar</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div></code></div></pre>`,Ao,hs,Ll,Ye,nn,Q,Co,Ze,ge,xl,st,ms,bl,_o,lt,at,ot,wl,ho,Ft,nt,pn,mo,FD=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'><span style="color: #546E7A">//\u6DFB\u52A0\u6807\u7B7E</span></div><div class='line'><span style="color: #EEFFFF">svg</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">selectAll</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">text</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">data</span><span style="color: #EEFFFF">(dataset)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">enter</span><span style="color: #EEFFFF">()</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">append</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">text</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">x</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">d</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> i</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> i </span><span style="color: #89DDFF">*</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">30</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">y</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">d</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> i</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> h </span><span style="color: #89DDFF">-</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">3</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">*</span><span style="color: #EEFFFF"> d </span><span style="color: #89DDFF">-</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">3</span><span style="color: #EEFFFF">) </span><span style="color: #546E7A">// \u9AD8\u4E09\u4E2A\u5355\u4F4D\u662F\u51CF</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">text</span><span style="color: #EEFFFF">(d </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> d)</span></div><div class='line'><span style="color: #89DDFF">  </span><span style="color: #546E7A">// \u6DFB\u52A0\u6837\u5F0F</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">fill</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">red</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">style</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">font-size</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">25px</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF">  </span><span style="color: #546E7A">//\u60AC\u505C\u6548\u679C</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">class</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">bar</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #546E7A">/** css\u4E2D</span></div><div class='line'><span style="color: #546E7A">		    .bar:hover &#123;</span></div><div class='line'><span style="color: #546E7A">			    fill: brown;</span></div><div class='line'><span style="color: #546E7A">			  &#125;</span></div><div class='line'><span style="color: #546E7A">		  **/</span></div></code></div></pre>`,Lo,Ls,kl,pt,en,Sl,xo,et,tn,Il,bo,tt,rn,wo,nD=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'><span style="color: #EEFFFF">svg</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">selectAll</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">rect</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">data</span><span style="color: #EEFFFF">(dataset)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">enter</span><span style="color: #EEFFFF">()</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">append</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">rect</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">x</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">d</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> i</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> i </span><span style="color: #89DDFF">*</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">30</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">y</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">d</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> i</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> h </span><span style="color: #89DDFF">-</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">3</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">*</span><span style="color: #EEFFFF"> d)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">width</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">25</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">height</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">d</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> i</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> d </span><span style="color: #89DDFF">*</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">3</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF">  </span><span style="color: #546E7A">// \u6BCF\u4E2A rect \u8282\u70B9\u4E0B\u9644\u52A0 title \u5143\u7D20\u3002 \u7136\u540E\u7528\u56DE\u8C03\u51FD\u6570\u8C03\u7528 text() \u65B9\u6CD5\u4F7F\u5B83\u7684\u6587\u672C\u663E\u793A\u6570\u636E\u503C\u3002</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">append</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">title</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">text</span><span style="color: #EEFFFF">(d </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> d)</span></div></code></div></pre>`,ko,xs,Gl,rt,cn,Vl,So,ct,En,bs,Ol,Et,yn,Io,pD=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'><span style="color: #546E7A">//\u521B\u5EFAsvg</span></div><div class='line'><span style="color: #EEFFFF">selection</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">append</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">svg</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div></code></div></pre>`,Go,ws,jl,yt,Dn,Hl,Vo,it,dn,Ul,Oo,Dt,vn,Bl,dt,fn,J,ks,vt,jo,ft,ut,At,Ss,Ct,Ho,_t,ht,un,Is,Tl,mt,An,Pl,Gs,Lt,Uo,xt,bt,Cn,Bo,eD=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'><span style="color: #EEFFFF">svg</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">selectAll</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">rect</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">data</span><span style="color: #EEFFFF">(dataset)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">enter</span><span style="color: #EEFFFF">()</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">append</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">rect</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">x</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">d</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> i</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> i </span><span style="color: #89DDFF">*</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">30</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">y</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">d</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> i</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> h </span><span style="color: #89DDFF">-</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">3</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">*</span><span style="color: #EEFFFF"> d)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">width</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">25</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">height</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">d</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> i</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">3</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">*</span><span style="color: #EEFFFF"> d)</span></div><div class='line'><span style="color: #89DDFF">  </span><span style="color: #546E7A">//\u5C06\u6240\u6709\u6761\u5F62\u56FE\u7684 fill \u8BBE\u7F6E\u4E3A\u6D77\u519B\u84DD\u3002</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">fill</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">navy</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div></code></div></pre>`,To,Vs,ql,wt,_n,Rl,Po,kt,hn,Os,zl,St,mn,Wl,It,Ln,qo,tD=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> svg </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> d3</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">select</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">body</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">append</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">svg</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">width</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> w)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">height</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> h)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">append</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">rect</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">) </span><span style="color: #546E7A">//rect\u77E9\u5F62</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">width</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">25</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">height</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">100</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">x</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">0</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">y</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">0</span><span style="color: #EEFFFF">)</span></div></code></div></pre>`,Ro,js,Ml,Gt,xn,L,zo,Vt,Ot,$l,jt,Hs,Wo,Ht,Ut,Mo,Bt,Tt,$o,Pt,bn,No,rD=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'><span style="color: #EEFFFF">svg</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">selectAll</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">circle</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">data</span><span style="color: #EEFFFF">(dataset)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">enter</span><span style="color: #EEFFFF">()</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">append</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">circle</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF">  </span><span style="color: #546E7A">//\u6563\u70B9\u56FE</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">cx</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> d </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> d[</span><span style="color: #F78C6C">0</span><span style="color: #EEFFFF">])</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">cy</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> d </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> h </span><span style="color: #89DDFF">-</span><span style="color: #EEFFFF"> d[</span><span style="color: #F78C6C">1</span><span style="color: #EEFFFF">])</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">r</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">5</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div></code></div></pre>`,Ko,Us,Nl,qt,wn,Bs,Kl,Rt,kn,Ql,Qo,zt,Sn,Jl,Jo,Wt,In,Ts,Xl,Mt,Gn,X,Xo,$t,Nt,Yo,Kt,Vn,Zo,cD=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> scale </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> d3</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">scaleLinear</span><span style="color: #EEFFFF">()</span></div></code></div></pre>`,go,Yl,Qt,On,sF,ED=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> scale </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> d3</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">scaleLinear</span><span style="color: #EEFFFF">() </span><span style="color: #546E7A">// \u5728\u8FD9\u91CC\u521B\u5EFA\u8F74</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> output </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">scale</span><span style="color: #EEFFFF">(</span><span style="color: #F78C6C">50</span><span style="color: #EEFFFF">) </span><span style="color: #546E7A">// \u8C03\u7528 scale\uFF0C\u4F20\u5165\u4E00\u4E2A\u53C2\u6570</span></div><div class='line'><span style="color: #EEFFFF">d3</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">select</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">body</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">append</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">h2</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">text</span><span style="color: #EEFFFF">(output)</span></div></code></div></pre>`,lF,Ps,Zl,Jt,jn,x,qs,Xt,aF,Yt,Zt,gt,Rs,sr,oF,lr,ar,or,V,FF,Fr,nr,nF,pr,er,zs,gl,pF,tr,rr,cr,sa,eF,Er,yr,Hn,la,ir,Un,tF,yD=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'><span style="color: #EEFFFF">scale</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">domain</span><span style="color: #EEFFFF">([</span><span style="color: #F78C6C">50</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">480</span><span style="color: #EEFFFF">])</span><span style="color: #89DDFF">;</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">//\u57DF</span></div><div class='line'><span style="color: #EEFFFF">scale</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">range</span><span style="color: #EEFFFF">([</span><span style="color: #F78C6C">10</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">500</span><span style="color: #EEFFFF">])</span><span style="color: #89DDFF">;</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">//\u8303\u56F4</span></div><div class='line'><span style="color: #82AAFF">scale</span><span style="color: #EEFFFF">(</span><span style="color: #F78C6C">50</span><span style="color: #EEFFFF">) </span><span style="color: #546E7A">//10</span></div><div class='line'><span style="color: #82AAFF">scale</span><span style="color: #EEFFFF">(</span><span style="color: #F78C6C">480</span><span style="color: #EEFFFF">) </span><span style="color: #546E7A">//500</span></div><div class='line'><span style="color: #82AAFF">scale</span><span style="color: #EEFFFF">(</span><span style="color: #F78C6C">325</span><span style="color: #EEFFFF">) </span><span style="color: #546E7A">//323.37</span></div><div class='line'><span style="color: #82AAFF">scale</span><span style="color: #EEFFFF">(</span><span style="color: #F78C6C">750</span><span style="color: #EEFFFF">)\u3002</span><span style="color: #546E7A">// 807.\u300267</span></div><div class='line'><span style="color: #EEFFFF">d3</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">scaleLinear</span><span style="color: #EEFFFF">()</span></div></code></div></pre>`,rF,aa,Dr,Bn,oa,dr,Tn,Fa,vr,Pn,Ws,na,fr,qn,h,pa,cF,ur,Ar,Cr,ea,EF,_r,hr,mr,Y,yF,Lr,xr,iF,br,wr,kr,Z,DF,Sr,Ir,dF,Gr,Vr,Rn,ta,Or,zn,vF,iD=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> locationData </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> [</span></div><div class='line'><span style="color: #EEFFFF">  [</span><span style="color: #F78C6C">1</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">7</span><span style="color: #EEFFFF">]</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF">  [</span><span style="color: #F78C6C">6</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">3</span><span style="color: #EEFFFF">]</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF">  [</span><span style="color: #F78C6C">8</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">3</span><span style="color: #EEFFFF">]</span></div><div class='line'><span style="color: #EEFFFF">]</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> minX </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> d3</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">min</span><span style="color: #EEFFFF">(locationData</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> d </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> d[</span><span style="color: #F78C6C">0</span><span style="color: #EEFFFF">]) </span><span style="color: #546E7A">//\u67E5\u627E\u5728d[0]\u4F4D\u7F6E\u4E0A\u6700\u5C0F\u7684\u503C</span></div></code></div></pre>`,fF,Ms,ra,jr,Wn,b,O,Hr,uF,Ur,Br,AF,Tr,Pr,qr,ca,CF,Rr,zr,Wr,_F,Mr,Mn,hF,DD=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> dataset </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> [</span></div><div class='line'><span style="color: #EEFFFF">  [</span><span style="color: #F78C6C">34</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">78</span><span style="color: #EEFFFF">]</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF">  [</span><span style="color: #F78C6C">109</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">280</span><span style="color: #EEFFFF">]</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF">  [</span><span style="color: #F78C6C">310</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">120</span><span style="color: #EEFFFF">]</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF">  [</span><span style="color: #F78C6C">79</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">411</span><span style="color: #EEFFFF">]</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF">  [</span><span style="color: #F78C6C">420</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">220</span><span style="color: #EEFFFF">]</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF">  [</span><span style="color: #F78C6C">233</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">145</span><span style="color: #EEFFFF">]</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF">  [</span><span style="color: #F78C6C">333</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">96</span><span style="color: #EEFFFF">]</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF">  [</span><span style="color: #F78C6C">222</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">333</span><span style="color: #EEFFFF">]</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF">  [</span><span style="color: #F78C6C">78</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">320</span><span style="color: #EEFFFF">]</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF">  [</span><span style="color: #F78C6C">21</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">123</span><span style="color: #EEFFFF">]</span></div><div class='line'><span style="color: #EEFFFF">]</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> w </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">500</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> h </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">500</span></div><div class='line'></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> padding </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">30</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> xScale </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> d3</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">scaleLinear</span><span style="color: #EEFFFF">()</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">domain</span><span style="color: #EEFFFF">([</span><span style="color: #F78C6C">0</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> d3</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">max</span><span style="color: #EEFFFF">(dataset</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> d </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> d[</span><span style="color: #F78C6C">0</span><span style="color: #EEFFFF">])])</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">range</span><span style="color: #EEFFFF">([padding</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> w </span><span style="color: #89DDFF">-</span><span style="color: #EEFFFF"> padding])</span></div></code></div></pre>`,mF,$s,Ea,$r,$n,g,LF,Nr,Kr,Ns,Qr,xF,Jr,Xr,Nn,bF,dD=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'><span style="color: #EEFFFF">svg</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">selectAll</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">circle</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">data</span><span style="color: #EEFFFF">(dataset)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">enter</span><span style="color: #EEFFFF">()</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">append</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">circle</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">cx</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> d </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">xScale</span><span style="color: #EEFFFF">(d[</span><span style="color: #F78C6C">0</span><span style="color: #EEFFFF">]))</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">cy</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> d </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> </span><span style="color: #82AAFF">yScale</span><span style="color: #EEFFFF">(d[</span><span style="color: #F78C6C">1</span><span style="color: #EEFFFF">]))</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">r</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">5</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div></code></div></pre>`,wF,Ks,ya,Yr,Kn,w,j,Zr,kF,gr,sc,SF,lc,ac,oc,IF,Fc,nc,GF,pc,Qn,ia,ec,Jn,VF,vD=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'><span style="color: #546E7A">// X\u8F74</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> xAxis </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> d3</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">axisBottom</span><span style="color: #EEFFFF">(xScale)</span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF">svg</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">append</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">g</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">transform</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">translate(0, </span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">+</span><span style="color: #EEFFFF"> (h </span><span style="color: #89DDFF">-</span><span style="color: #EEFFFF"> padding) </span><span style="color: #89DDFF">+</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">)</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">) </span><span style="color: #546E7A">// translate(0,x)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">call</span><span style="color: #EEFFFF">(xAxis) </span><span style="color: #546E7A">// x\u8F74\u4F5C\u4E3A\u53C2\u6570\u88AB\u4F20\u9012\u7ED9 call() \u65B9\u6CD5</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">// Y\u8F74</span></div><div class='line'><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> yAxis </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> d3</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">axisLeft</span><span style="color: #EEFFFF">(yScale)</span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF">svg</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">append</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">g</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">transform</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">translate(0,</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">+</span><span style="color: #EEFFFF"> (h </span><span style="color: #89DDFF">-</span><span style="color: #EEFFFF"> padding) </span><span style="color: #89DDFF">+</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">)</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">call</span><span style="color: #EEFFFF">(xAxis)</span></div><div class='line'><span style="color: #EEFFFF">svg</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">append</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">g</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">transform</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">translate(</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">+</span><span style="color: #EEFFFF"> padding </span><span style="color: #89DDFF">+</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">,0)</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">call</span><span style="color: #EEFFFF">(yAxis)</span></div></code></div></pre>`,OF,Qs,Da,tc,Xn,Js,da,rc,Yn,va,jF,cc,Zn,HF,fD=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'><span style="color: #EEFFFF">svg</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">selectAll</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">circle</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">data</span><span style="color: #EEFFFF">(dataset)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">enter</span><span style="color: #EEFFFF">()</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">append</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">circle</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">cx</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> d </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> d[</span><span style="color: #F78C6C">0</span><span style="color: #EEFFFF">])</span></div><div class='line'><span style="color: #89DDFF">  </span><span style="color: #546E7A">//\u53CD\u8F6C\u56FE\u50CF</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">cy</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> d </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> h </span><span style="color: #89DDFF">-</span><span style="color: #EEFFFF"> d[</span><span style="color: #F78C6C">1</span><span style="color: #EEFFFF">])</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">r</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">5</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">// \u6563\u70B9\u56FE\u52A0\u6807\u7B7E</span></div><div class='line'><span style="color: #EEFFFF">svg</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">selectAll</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">text</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">data</span><span style="color: #EEFFFF">(dataset)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">enter</span><span style="color: #EEFFFF">()</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">append</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">text</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #89DDFF">  </span><span style="color: #546E7A">// Add your code below this line</span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">x</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> d </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> d[</span><span style="color: #F78C6C">0</span><span style="color: #EEFFFF">] </span><span style="color: #89DDFF">+</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">5</span><span style="color: #EEFFFF">)</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">attr</span><span style="color: #EEFFFF">(</span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">y</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> d </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> h </span><span style="color: #89DDFF">-</span><span style="color: #EEFFFF"> d[</span><span style="color: #F78C6C">1</span><span style="color: #EEFFFF">])</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">text</span><span style="color: #EEFFFF">(d </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> d[</span><span style="color: #F78C6C">0</span><span style="color: #EEFFFF">] </span><span style="color: #89DDFF">+</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">, </span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">+</span><span style="color: #EEFFFF"> d[</span><span style="color: #F78C6C">1</span><span style="color: #EEFFFF">])</span></div></code></div></pre>`,UF,H,Ec,yc,BF,Xs,ss,ic,Ys,Dc;return{c(){i=o("p"),m=e("\u5185\u5BB9\u51FA\u81EA\uFF1A"),u=o("a"),os=e("FreeCodeCamp"),D=c(),A=o("blockquote"),k=o("p"),Lp=e("D3 \u6216 D3.js \u8868\u793A\u6570\u636E\u9A71\u52A8\u6587\u6863\u3002\u5B83\u662F\u4E00\u4E2A\u7528\u4E8E\u5728\u6D4F\u89C8\u5668\u4E2D\u521B\u5EFA\u52A8\u6001\u548C\u4EA4\u4E92\u5F0F\u6570\u636E\u89C6\u89C9\u5316\u7684 JavaScript \u5E93\u3002"),gs=o("sup"),Fs=o("a"),xp=e("1"),qF=c(),ns=o("h2"),sl=o("a"),bp=e("\u5B66\u4E60\u8D44\u6E90"),RF=c(),f=o("ul"),wa=o("li"),U=o("a"),wp=e("D3.js - Data-Driven Documents"),kp=c(),ll=o("li"),B=o("a"),Sp=e("Data Visualization with D3 \u2013 Full Course for Beginners [2022] - YouTube"),S=o("ul"),ka=o("li"),T=o("a"),Ip=e("Get it Right in Black & White Index - Get it Right in Black & White - VizHub Forum"),Gp=c(),Sa=o("li"),P=o("a"),Vp=e("New Livestream Series: Get it Right in Black and White"),Op=c(),Ia=o("li"),q=o("a"),jp=e("Get it Right in Black & White Index - Get it Right in Black & White - VizHub Forum"),Hp=c(),Ga=o("li"),R=o("a"),Up=e("The D3 Graph Gallery \u2013 Simple charts made with d3.js"),Bp=c(),Va=o("li"),z=o("a"),Tp=e("Introduction to D3.js | D3 in Depth"),Pp=c(),Oa=o("li"),W=o("a"),qp=e("\u6570\u636E\u53EF\u89C6\u5316 \u8BA4\u8BC1 | freeCodeCamp.org"),Rp=c(),ja=o("li"),M=o("a"),zp=e("Amelia Wattenberger"),Wp=c(),Ha=o("li"),$=o("a"),Mp=e("GitHub - xswei/d3js_doc: D3js \u4E2D\u6587\u6587\u6863 D3 \u4E2D\u6587"),zF=c(),ps=o("h2"),al=o("a"),$p=e("\u57FA\u7840\u64CD\u4F5C"),WF=c(),es=o("h3"),ol=o("a"),Np=e("\u4FEE\u6539\u5143\u7D20"),MF=c(),_=o("ul"),ts=o("li"),Ua=o("code"),Kp=e("select()"),Qp=e(" \uFF1A"),rs=o("ul"),Ba=o("li"),Jp=e("\u529F\u80FD\uFF1A\u4ECE\u6587\u6863\u4E2D\u9009\u62E9\u4E00\u4E2A\u5143\u7D20\u3002"),Xp=c(),Ta=o("li"),Yp=e("\u53C2\u6570\uFF1A\u5B83\u63A5\u53D7\u4F60\u60F3\u8981\u9009\u62E9\u7684\u5143\u7D20\u7684\u540D\u5B57\u4F5C\u4E3A\u53C2\u6570\uFF0C\u5E76\u8FD4\u56DE\u6587\u6863\u4E2D\u7B2C\u4E00\u4E2A\u4E0E\u540D\u5B57\u5339\u914D\u7684 HTML \u8282\u70B9\u3002"),Zp=c(),Fl=o("li"),Pa=o("code"),gp=e("selectAll()"),qa=o("ul"),Ra=o("li"),se=e("\u9009\u62E9\u4E00\u7EC4\u5143\u7D20\u3002 \u5E76\u4EE5 HTML \u8282\u70B9\u6570\u7EC4\u7684\u5F62\u5F0F\u8FD4\u56DE\u8BE5\u6587\u672C\u4E2D\u6240\u6709\u5339\u914D\u6240\u8F93\u5165\u5B57\u7B26\u4E32\u7684\u5BF9\u8C61"),le=c(),nl=o("li"),za=o("code"),ae=e("append()"),cs=o("ul"),Wa=o("li"),oe=e("\u529F\u80FD\uFF1A\u5C06 HTML \u8282\u70B9\u9644\u52A0\u5230\u9009\u5B9A\u9879\u76EE\uFF0C\u5E76\u8FD4\u56DE\u8BE5\u8282\u70B9\u7684\u53E5\u67C4\u3002"),Fe=c(),Ma=o("li"),ne=e("\u53C2\u6570\uFF1A\u63A5\u6536\u4F60\u5E0C\u671B\u6DFB\u52A0\u5230\u6587\u6863\u4E2D\u7684\u5143\u7D20"),pe=c(),pl=o("li"),$a=o("code"),ee=e("text()"),Es=o("ul"),Na=o("li"),te=e("\u529F\u80FD\uFF1A\u8BBE\u7F6E\u6240\u9009\u8282\u70B9\u7684\u6587\u672C\uFF0C\u4E5F\u53EF\u4EE5\u83B7\u53D6\u5F53\u524D\u6587\u672C\u3002 \u4E5F\u53EF\u4EE5\u7528\u6765\u6DFB\u52A0\u6807\u7B7E"),re=c(),Ka=o("li"),ce=e("\u53C2\u6570\uFF1A\u5B57\u7B26\u4E32\u6216\u8005\u56DE\u8C03\u51FD\u6570"),$F=c(),Qa=new d(!1),Ja=c(),el=o("p"),Ee=e("\u5728 D3 \u4E2D\u53EF\u4EE5\u4E32\u8054\u591A\u4E2A\u65B9\u6CD5\uFF0C\u8FDE\u7EED\u6267\u884C\u4E00\u7CFB\u5217\u64CD\u4F5C\u3002->[[function chaining|\u94FE\u5F0F\u8C03\u7528]]"),NF=c(),ys=o("h3"),tl=o("a"),ye=e("\u4F7F\u7528\u6570\u636E"),KF=c(),rl=o("p"),N=o("a"),ie=e("d3-selection"),QF=c(),K=o("ul"),is=o("li"),Xa=o("code"),De=e("data()"),de=e("\uFF1A"),I=o("ul"),Ya=o("li"),ve=e("\u5C06\u5143\u7D20\u4E0E\u6570\u636E\u7ED1\u5B9A"),fe=c(),Za=o("li"),ue=e("\u4E0D\u9700\u8981\u5199 for \u5FAA\u73AF\u6216\u8005\u7528 forEach() \u8FED\u4EE3\u6570\u636E\u96C6\u4E2D\u7684\u5BF9\u8C61\u3002 data() \u65B9\u6CD5\u4F1A\u89E3\u6790\u6570\u636E\u96C6\uFF0C\u4EFB\u4F55\u94FE\u63A5\u5728 data() \u540E\u9762\u7684\u65B9\u6CD5\u90FD\u4F1A\u4E3A\u6570\u636E\u96C6\u4E2D\u7684\u6BCF\u4E2A\u5BF9\u8C61\u8FD0\u884C\u4E00\u6B21\u3002"),Ae=c(),Ds=o("li"),Ce=e("\u53EF\u4EE5\u4F7F\u7528\u65B9\u62EC\u53F7\u7684\u65B9\u5F0F\uFF0C\u5982 "),ga=o("code"),_e=e("d[0]"),he=e("\uFF0C\u6765\u8BBF\u95EE\u6570\u7EC4\u4E2D\u7684\u503C\u3002"),me=c(),cl=o("li"),so=o("code"),Le=e("enter()"),xe=e("\uFF1A\u83B7\u53D6\u9700\u8981\u63D2\u5165\u7684\u9009\u62E9\u96C6(\u6570\u636E\u4E2A\u6570\u5927\u4E8E\u5143\u7D20\u4E2A\u6570)\u7684\u5360\u4F4D\u7B26."),JF=c(),El=o("blockquote"),ds=o("p"),be=e("\u5F53 enter() \u548C data() \u65B9\u6CD5\u4E00\u8D77\u4F7F\u7528\u65F6\uFF0C\u5B83\u628A\u4ECE\u9875\u9762\u4E2D\u9009\u62E9\u7684\u5143\u7D20\u548C\u6570\u636E\u96C6\u4E2D\u7684\u5143\u7D20\u4F5C"),lo=o("strong"),we=e("\u6BD4\u8F83"),ke=e("\u3002 \u5982\u679C\u9875\u9762\u4E2D\u9009\u62E9\u7684\u5143\u7D20\u8F83\u5C11\u5219\u521B\u5EFA\u7F3A\u5C11\u7684\u5143\u7D20\u3002"),XF=c(),yl=o("p"),Se=e("\u53EF\u4EE5\u7406\u89E3\u4E3A\u7BA1\u7406\u4ED3\u5E93\u7684\uFF0C\u9009\u62E9\u7684\u5143\u7D20\u662F\u8D27\u67B6\uFF0C\u6570\u636E\u662F\u8D27\uFF0C\u5982\u679C\u8D27\u67B6\u4E0D\u591F\u4E86\uFF0C\u5C31\u518D\u8865\u51E0\u4E2A\u8D27\u67B6\uFF0C\u5982\u679C\u591A\u4E86\u5C31\u4E0D\u7BA1"),YF=c(),ao=new d(!1),oo=c(),vs=o("h3"),il=o("a"),Ie=e("\u4F7F\u7528\u52A8\u6001\u6570\u636E"),ZF=c(),Dl=o("p"),Ge=e("text \u4E2D\u8BBE\u7F6E\u56DE\u8C03\u5904\u7406\u6570\u636E\u5982\uFF1A"),gF=c(),dl=o("ul"),vl=o("li"),Fo=o("code"),Ve=e("d3.json()"),Oe=e(": \u4ECE\u6307\u5B9A\u7684 input URL \u83B7\u53D6 JSON \u6587\u4EF6\u3002\u5982\u679C\u6307\u5B9A\u4E86 init \u5219\u4F1A\u5C06\u5176\u4F20\u9012\u7ED9\u5E95\u5C42\u7684 fetch \u65B9\u6CD5"),sn=c(),no=new d(!1),po=c(),fs=o("h3"),fl=o("a"),je=e("\u7ED9\u5143\u7D20\u6DFB\u52A0\u5185\u8054\u6837\u5F0F"),ln=c(),ul=o("ul"),Al=o("li"),eo=o("code"),He=e("style()"),us=o("ul"),to=o("li"),Ue=e("\u529F\u80FD\uFF1A\u5728\u52A8\u6001\u5143\u7D20\u4E0A\u6DFB\u52A0\u5185\u8054 CSS \u6837\u5F0F"),Be=c(),ro=o("li"),Te=e("\u53C2\u6570\uFF1A\u4EE5\u7528\u9017\u53F7\u5206\u9694\u7684\u952E\u503C\u5BF9\u4F5C\u4E3A\u53C2\u6570"),an=c(),co=new d(!1),Eo=c(),As=o("h3"),Cl=o("a"),Pe=e("\u6DFB\u52A0 Class"),on=c(),_l=o("ul"),hl=o("li"),yo=o("code"),qe=e("attr()"),G=o("ul"),io=o("li"),Re=e("\u529F\u80FD\uFF1A\u53EF\u4EE5\u7ED9\u5143\u7D20\u6DFB\u52A0\u4EFB\u4F55 HTML \u5C5E\u6027\uFF0C\u5305\u62EC class \u540D\u79F0\u3002"),ze=c(),ml=o("li"),We=e("\u53C2\u6570\uFF1A"),Cs=o("ul"),Do=o("li"),Me=e("attr() \u65B9\u6CD5\u548C style() \u7684\u4F7F\u7528\u65B9\u6CD5\u4E00\u6837\u3002 \u5B83\u4F7F\u7528\u9017\u53F7\u5206\u9694\u503C\uFF0C\u5E76\u4E14\u53EF\u4EE5\u4F7F\u7528\u56DE\u8C03\u51FD\u6570"),$e=c(),_s=o("li"),Ne=e("\u53EF\u63A5\u6536\u4E00\u4E2A\u56DE\u8C03\u51FD\u6570\u6765\u52A8\u6001\u8BBE\u7F6E\u5C5E\u6027\u3002 \u8FD9\u4E2A\u56DE\u8C03\u51FD\u6570\u6709\u4E24\u4E2A\u53C2\u6570\uFF0C\u4E00\u4E2A\u662F\u6570\u636E\u70B9\u672C\u8EAB\uFF08\u901A\u5E38\u662F "),vo=o("code"),Ke=e("d"),Qe=e("\uFF09\uFF0C\u53E6\u4E00\u4E2A\u662F\u8BE5\u6570\u636E\u70B9\u5728\u6570\u7EC4\u4E2D\u7684\u4E0B\u6807 i\uFF0C \u8FD9\u4E2A\u53C2\u6570\u662F\u53EF\u9009\u7684"),Je=c(),fo=o("li"),Xe=e("\u5F53\u9700\u8981\u6DFB\u52A0 class \u65F6\uFF0Cclass \u53C2\u6570\u4FDD\u6301\u4E0D\u53D8\uFF0C\u53EA\u6709 container \u53C2\u6570\u4F1A\u53D1\u751F\u53D8\u5316\u3002"),Fn=c(),uo=new d(!1),Ao=c(),hs=o("h3"),Ll=o("a"),Ye=e("\u6807\u7B7E"),nn=c(),Q=o("ul"),Co=o("li"),Ze=e("\u548C rect \u5143\u7D20\u7C7B\u4F3C\uFF0Ctext \u5143\u7D20\u4E5F\u9700\u8981 x \u548C y \u5C5E\u6027\u6765\u6307\u5B9A\u5176\u653E\u7F6E\u5728 SVG \u753B\u5E03\u4E0A\u7684\u4F4D\u7F6E\uFF0C \u5B83\u4E5F\u9700\u8981\u80FD\u591F\u83B7\u53D6\u6570\u636E\u6765\u663E\u793A\u6570\u636E\u503C\u3002"),ge=c(),xl=o("li"),st=e("\u6807\u7B7E\u6837\u5F0F"),ms=o("ul"),bl=o("li"),_o=o("code"),lt=e("fill"),at=e(" \u5C5E\u6027\u4E3A text \u8282\u70B9\u8BBE\u7F6E\u6587\u672C\u989C\u8272"),ot=c(),wl=o("li"),ho=o("code"),Ft=e("style()"),nt=e(" \u65B9\u6CD5\u8BBE\u7F6E\u5176\u5B83\u6837\u5F0F\u7684 CSS \u89C4\u5219\uFF0C\u4F8B\u5982 font-family \u6216 font-size\u3002"),pn=c(),mo=new d(!1),Lo=c(),Ls=o("h3"),kl=o("a"),pt=e("\u6DFB\u52A0\u5DE5\u5177\u63D0\u793A tooltip"),en=c(),Sl=o("ul"),xo=o("li"),et=e("\u5F53\u7528\u6237\u5728\u4E00\u4E2A\u5BF9\u8C61\u4E0A\u60AC\u505C\u65F6\uFF0C\u63D0\u793A\u6846\u53EF\u4EE5\u663E\u793A\u5173\u4E8E\u8FD9\u4E2A\u5BF9\u8C61\u66F4\u591A\u7684\u4FE1\u606F"),tn=c(),Il=o("ol"),bo=o("li"),tt=e("title"),rn=c(),wo=new d(!1),ko=c(),xs=o("h2"),Gl=o("a"),rt=e("SVG"),cn=c(),Vl=o("ul"),So=o("li"),ct=e("\u5750\u6807\u7CFB\uFF1A\u5750\u6807\u8F74\u7684\u539F\u70B9\u5728\u5DE6\u4E0A\u89D2\u3002 x \u5750\u6807\u4E3A 0 \u5C06\u56FE\u5F62\u653E\u5728 SVG \u533A\u57DF\u7684\u5DE6\u8FB9\u7F18\uFF0C y \u5750\u6807\u4E3A 0 \u5C06\u56FE\u5F62\u653E\u5728 SVG \u533A\u57DF\u7684\u4E0A\u8FB9\u7F18\u3002 x \u503C\u589E\u5927\u77E9\u5F62\u5C06\u5411\u53F3\u79FB\u52A8\uFF0C y \u503C\u589E\u5927\u77E9\u5F62\u5C06\u5411\u4E0B\u79FB\u52A8\u3002"),En=c(),bs=o("h3"),Ol=o("a"),Et=e("\u521B\u5EFA SVG"),yn=c(),Io=new d(!1),Go=c(),ws=o("h3"),jl=o("a"),yt=e("\u53CD\u8F6C SVG \u5143\u7D20"),Dn=c(),Hl=o("ul"),Vo=o("li"),it=e("\u4E3A\u4E86\u4F7F\u6761\u5F62\u56FE\u5411\u4E0A\uFF0C\u9700\u8981\u6539\u53D8 y \u5750\u6807\u8BA1\u7B97\u7684\u65B9\u5F0F"),dn=c(),Ul=o("blockquote"),Oo=o("p"),Dt=e("SVG \u533A\u57DF\u7684\u9AD8\u5EA6\u4E3A 100\u3002 \u5982\u679C\u5728\u96C6\u5408\u4E2D\u4E00\u4E2A\u6570\u636E\u70B9\u7684\u503C\u4E3A 0\uFF0C\u90A3\u4E48\u6761\u5F62\u5C06\u4ECE SVG \u533A\u57DF\u7684\u6700\u5E95\u7AEF\u5F00\u59CB\uFF08\u800C\u4E0D\u662F\u9876\u7AEF\uFF09\u3002 \u4E3A\u6B64\uFF0Cy \u5750\u6807\u7684\u503C\u5E94\u4E3A 100\u3002 \u5982\u679C\u6570\u636E\u70B9\u7684\u503C\u4E3A 1\uFF0C\u4F60\u5C06\u4ECE y \u5750\u6807\u4E3A 100 \u5F00\u59CB\u6765\u5C06\u8FD9\u4E2A\u6761\u5F62\u8BBE\u7F6E\u5728\u5E95\u7AEF\uFF0C \u7136\u540E\u9700\u8981\u8003\u8651\u8BE5\u6761\u5F62\u7684\u9AD8\u5EA6\u4E3A 1\uFF0C\u6240\u4EE5\u6700\u7EC8\u7684 y \u5750\u6807\u5C06\u662F 99\u3002"),vn=c(),Bl=o("p"),dt=e("(\u9AD8\u5EA6\u4ECE\u4E0B\u9762\u5F00\u59CB\u8BA1\u7B97\uFF0C\u5750\u6807\u8F74\u4ECE\u4E0A\u9762\u5F00\u59CB)"),fn=c(),J=o("ul"),ks=o("li"),vt=e("y \u5750\u6807\u4E3A "),jo=o("code"),ft=e("y = heightOfSVG - heightOfBar"),ut=e(" \u4F1A\u5C06\u6761\u5F62\u56FE\u5411\u4E0A\u653E\u7F6E\u3002"),At=c(),Ss=o("li"),Ct=e("\u901A\u5E38\uFF0C\u5173\u7CFB\u662F "),Ho=o("code"),_t=e("y = h - m * d"),ht=e("\uFF0C\u5176\u4E2D m \u662F\u7F29\u653E\u6570\u636E\u70B9\u7684\u5E38\u6570\u3002"),un=c(),Is=o("h3"),Tl=o("a"),mt=e("\u66F4\u6539 SVG \u5143\u7D20\u7684\u989C\u8272"),An=c(),Pl=o("ul"),Gs=o("li"),Lt=e("\u5728 SVG \u4E2D\uFF0C rect \u56FE\u5F62\u7528 "),Uo=o("code"),xt=e("fill"),bt=e(" \u5C5E\u6027\u7740\u8272\u3002 \u5B83\u652F\u6301\u5341\u516D\u8FDB\u5236\u4EE3\u7801\u3001\u989C\u8272\u540D\u79F0\u3001rgb \u503C\u4EE5\u53CA\u66F4\u590D\u6742\u7684\u9009\u9879\uFF0C\u6BD4\u5982\u6E10\u53D8\u548C\u900F\u660E\u3002"),Cn=c(),Bo=new d(!1),To=c(),Vs=o("h3"),ql=o("a"),wt=e("SVG \u56FE\u5F62"),_n=c(),Rl=o("ul"),Po=o("li"),kt=e("SVG \u652F\u6301\u591A\u79CD\u56FE\u5F62\uFF0C\u6BD4\u5982\u77E9\u5F62\u548C\u5706\u5F62\uFF0C \u5E76\u7528\u5B83\u4EEC\u6765\u663E\u793A\u6570\u636E\u3002"),hn=c(),Os=o("h4"),zl=o("a"),St=e("\u77E9\u5F62"),mn=c(),Wl=o("p"),It=e("SVG \u7684 rect \u6709\u56DB\u4E2A\u5C5E\u6027\u3002 x \u548C y \u5750\u6807\u6307\u5B9A\u56FE\u5F62\u653E\u5728 svg \u533A\u57DF\u7684\u4F4D\u7F6E\uFF0C height \u548C width \u6307\u5B9A\u56FE\u5F62\u5927\u5C0F"),Ln=c(),qo=new d(!1),Ro=c(),js=o("h4"),Ml=o("a"),Gt=e("\u5706\u5F62"),xn=c(),L=o("ul"),zo=o("li"),Vt=e("SVG \u7528 circle \u6807\u7B7E\u6765\u521B\u5EFA\u5706\u5F62"),Ot=c(),$l=o("li"),jt=e("circle \u6709\u4E09\u4E2A\u4E3B\u8981\u7684\u5C5E\u6027\u3002"),Hs=o("ul"),Wo=o("li"),Ht=e("cx \u548C cy \u5C5E\u6027\u662F\u5750\u6807\u3002 \u5B83\u4EEC\u544A\u8BC9 D3 \u5C06\u56FE\u5F62\u7684\u4E2D\u5FC3\u653E\u5728 SVG \u753B\u5E03\u7684\u4F55\u5904\u3002"),Ut=c(),Mo=o("li"),Bt=e("\u534A\u5F84\uFF08 r \u5C5E\u6027\uFF09\u7ED9\u51FA circle \u7684\u5927\u5C0F\u3002"),Tt=c(),$o=o("li"),Pt=e("\u548C rect \u7684 y \u5750\u6807\u4E00\u6837\uFF0Ccircle \u7684 cy \u5C5E\u6027\u662F\u4ECE SVG \u753B\u5E03\u7684\u9876\u7AEF\u5F00\u59CB\u6D4B\u91CF\u7684\uFF0C\u800C\u4E0D\u662F\u4ECE\u5E95\u7AEF\u3002"),bn=c(),No=new d(!1),Ko=c(),Us=o("h2"),Nl=o("a"),qt=e("\u6BD4\u4F8B\u5C3A"),wn=c(),Bs=o("h3"),Kl=o("a"),Rt=e("\u521B\u5EFA\u7EBF\u6027\u6BD4\u4F8B"),kn=c(),Ql=o("blockquote"),Qo=o("p"),zt=e("\u6761\u5F62\u56FE\u548C\u6563\u70B9\u56FE\u90FD\u76F4\u63A5\u5728 SVG \u753B\u5E03\u4E0A\u7ED8\u5236\u6570\u636E\u3002 \u4F46\u662F\uFF0C\u5982\u679C\u4E00\u7EC4\u7684\u9AD8\u6216\u8005\u5176\u4E2D\u4E00\u4E2A\u6570\u636E\u70B9\u6BD4 SVG \u7684\u9AD8\u6216\u5BBD\u66F4\u5927\uFF0C\u5B83\u5C06\u8DD1\u5230 SVG \u533A\u57DF\u5916\u3002"),Sn=c(),Jl=o("blockquote"),Jo=o("p"),Wt=e("D3 \u4E2D\uFF0C\u6BD4\u4F8B\u5C3A\u53EF\u5E2E\u52A9\u5E03\u5C40\u6570\u636E\u3002 scales \u662F\u51FD\u6570\uFF0C\u5B83\u544A\u8BC9\u7A0B\u5E8F\u5982\u4F55\u5C06\u4E00\u7EC4\u539F\u59CB\u6570\u636E\u70B9\u6620\u5C04\u5230 SVG \u753B\u5E03\u4E0A\u3002"),In=c(),Ts=o("h4"),Xl=o("a"),Mt=e("\u7EBF\u6027\u7F29\u653E"),Gn=c(),X=o("ul"),Xo=o("li"),$t=e("\u901A\u5E38\u4F7F\u7528\u4E8E\u5B9A\u91CF\u6570\u636E"),Nt=c(),Yo=o("li"),Kt=e("\u9ED8\u8BA4\u60C5\u51B5\u4E0B\uFF0C\u6BD4\u4F8B\u5C3A\u4F7F\u7528\u4E00\u5BF9\u4E00\u5173\u7CFB\uFF08identity relationship\uFF09\u3002 \u8F93\u5165\u7684\u503C\u548C\u8F93\u51FA\u7684\u503C\u76F8\u540C\u3002"),Vn=c(),Zo=new d(!1),go=c(),Yl=o("p"),Qt=e("\u4F8B\u5B50"),On=c(),sF=new d(!1),lF=c(),Ps=o("h4"),Zl=o("a"),Jt=e("\u6309\u6BD4\u4F8B\u8BBE\u7F6E\u57DF\u548C\u8303\u56F4"),jn=c(),x=o("ul"),qs=o("li"),Xt=e("\u57DF domain\uFF1A\u5047\u8BBE\u6709\u4E00\u4E2A\u6570\u636E\u96C6\u8303\u56F4\u4E3A 50 \u5230 480\uFF0C \u8FD9\u662F\u7F29\u653E\u7684"),aF=o("strong"),Yt=e("\u8F93\u5165\u4FE1\u606F"),Zt=e("\uFF0C\u4E5F\u88AB\u79F0\u4E3A\u57DF\u3002"),gt=c(),Rs=o("li"),sr=e("\u8303\u56F4 range\uFF1A\u6CBF\u7740 x \u8F74\u5C06\u8FD9\u4E9B\u70B9\u6620\u5C04\u5230 SVG \u753B\u5E03\u4E0A\uFF0C\u4F4D\u7F6E\u4ECB\u4E8E 10 \u4E2A\u5355\u4F4D\u5230 500 \u4E2A\u5355\u4F4D\u4E4B\u95F4\u3002 \u8FD9\u662F"),oF=o("strong"),lr=e("\u8F93\u51FA\u4FE1\u606F"),ar=e("\uFF0C\u4E5F\u88AB\u79F0\u4E3A\u8303\u56F4\u3002"),or=c(),V=o("li"),FF=o("code"),Fr=e("domain()"),nr=e(" \u548C "),nF=o("code"),pr=e("range()"),er=e(" \u65B9\u6CD5\u8BBE\u7F6E\u6BD4\u4F8B\u5C3A\u7684\u503C\uFF0C \u5B83\u4EEC\u90FD\u63A5\u53D7\u4E00\u4E2A\u81F3\u5C11\u6709\u4E24\u4E2A\u5143\u7D20\u7684\u6570\u7EC4\u4F5C\u4E3A\u53C2\u6570\u3002"),zs=o("ul"),gl=o("li"),pF=o("code"),tr=e("domain()"),rr=e(" \u65B9\u6CD5\u7ED9\u6BD4\u4F8B\u5C3A\u4F20\u9012\u5173\u4E8E\u6563\u70B9\u56FE\u539F\u6570\u636E\u503C\u7684\u4FE1\u606F"),cr=c(),sa=o("li"),eF=o("code"),Er=e("range()"),yr=e(" \u65B9\u6CD5\u7ED9\u51FA\u5728\u9875\u9762\u4E0A\u8FDB\u884C\u53EF\u89C6\u5316\u7684\u5B9E\u9645\u7A7A\u95F4\u4FE1\u606F"),Hn=c(),la=o("p"),ir=e("\u4F8B\u5B50\uFF1A"),Un=c(),tF=new d(!1),rF=c(),aa=o("p"),Dr=e("\u6309\u987A\u5E8F\uFF0C\u5C06\u5728\u63A7\u5236\u53F0\u4E2D\u663E\u793A\u4EE5\u4E0B\u503C\uFF1A10\u3001500\u3001323.37 \u548C 807.67\u3002"),Bn=c(),oa=o("p"),dr=e("\u6CE8\u610F\uFF0C\u6BD4\u4F8B\u5C3A\u4F7F\u7528\u4E86\u57DF\u548C\u8303\u56F4\u4E4B\u95F4\u7684\u7EBF\u6027\u5173\u7CFB\u6765\u627E\u51FA\u7ED9\u5B9A\u6570\u5B57\u7684\u8F93\u51FA\u503C\u3002 \u57DF\u4E2D\u7684\u6700\u5C0F\u503C\uFF0850\uFF09\u6620\u5C04\u4E3A\u8303\u56F4\u4E2D\u7684\u6700\u5C0F\u503C\uFF0810\uFF09\u3002"),Tn=c(),Fa=o("p"),vr=e("\uFF08\u4E5F\u5C31\u662F\u7ED9\u5B9A\u8303\u56F4\uFF0C\u7528\u7EBF\u6027\u5173\u7CFB\u7F29\u5C0F\uFF0C\u6BD4\u5982\u56FE\u7247\u653E\u5927\u7F29\u5C0F\uFF0C\u7ED9\u4E86\u539F\u56FE\u5927\u5C0F\u548C\u7F29\u5C0F\u540E\u7684\u56FE\u7247\u5927\u5C0F\uFF0C\u6839\u636E\u7EBF\u6027\u5173\u7CFB\u6BD4\u4F8B\u6765\u8BA1\u7B97\u6BCF\u4E2A\u50CF\u7D20\u7684\u4F4D\u7F6E\uFF0C\u5143\u7D20\u7684\u5927\u5C0F\uFF09"),Pn=c(),Ws=o("h4"),na=o("a"),fr=e("\u6700\u5C0F\u503C\u6700\u5927\u503C"),qn=c(),h=o("ul"),pa=o("li"),cF=o("code"),ur=e("d3.min"),Ar=e("\uFF1A\u6700\u5C0F\u503C"),Cr=c(),ea=o("li"),EF=o("code"),_r=e("d3.max"),hr=e(": \u6700\u5927\u503C"),mr=c(),Y=o("li"),yF=o("code"),Lr=e("min()"),xr=e(" \u548C "),iF=o("code"),br=e("max()"),wr=e(" \u90FD\u53EF\u4EE5\u4F7F\u7528\u56DE\u8C03\u51FD\u6570\uFF0C\u4E0B\u9762\u4F8B\u5B50\u4E2D\u56DE\u8C03\u51FD\u6570\u7684\u53C2\u6570 d \u662F\u5F53\u524D\u7684\u5185\u90E8\u6570\u7EC4\u3002"),kr=c(),Z=o("li"),DF=o("code"),Sr=e("min()"),Ir=e(" \u548C "),dF=o("code"),Gr=e("max()"),Vr=e(" \u65B9\u6CD5\u5728\u8BBE\u7F6E\u6BD4\u4F8B\u5C3A\u65F6\u5341\u5206\u6709\u7528"),Rn=c(),ta=o("p"),Or=e("\u4F8B\u5B50\uFF1A\u627E\u5230\u4E8C\u7EF4\u6570\u7EC4\u7684\u6700\u5927\u503C\u548C\u6700\u5C0F\u503C"),zn=c(),vF=new d(!1),fF=c(),Ms=o("h3"),ra=o("a"),jr=e("\u4F7F\u7528\u52A8\u6001\u6BD4\u4F8B"),Wn=c(),b=o("ul"),O=o("li"),Hr=e("\u7528"),uF=o("code"),Ur=e("min()"),Br=e(" \u548C "),AF=o("code"),Tr=e("max()"),Pr=e(" \u6765\u786E\u5B9A\u6BD4\u4F8B\u5C3A\u8303\u56F4\u548C\u57DF"),qr=c(),ca=o("li"),CF=o("code"),Rr=e("padding"),zr=e(" \u5C06\u5728\u6563\u70B9\u56FE\u548C SVG \u753B\u5E03\u8FB9\u7F18\u4E4B\u95F4\u6DFB\u52A0\u7A7A\u9699\u3002"),Wr=c(),_F=o("li"),Mr=e("\u4FDD\u6301\u7ED8\u56FE\u5728\u53F3\u4E0A\u89D2\u3002 \u5F53\u4E3A y \u5750\u6807\u8BBE\u7F6E range \u65F6\uFF0C\u5927\u7684\u503C\uFF08height \u51CF\u53BB padding\uFF09\u662F\u7B2C\u4E00\u4E2A\u53C2\u6570\uFF0C\u5C0F\u7684\u503C\u662F\u7B2C\u4E8C\u4E2A\u53C2\u6570\u3002"),Mn=c(),hF=new d(!1),mF=c(),$s=o("h3"),Ea=o("a"),$r=e("\u4F7F\u7528\u9884\u5B9A\u4E49\u7684\u6BD4\u4F8B\u653E\u7F6E\u5143\u7D20"),$n=c(),g=o("ul"),LF=o("li"),Nr=e("\u7528\u6BD4\u4F8B\u5C3A\u51FD\u6570\u4E3A SVG \u56FE\u5F62\u8BBE\u7F6E\u5750\u6807\u5C5E\u6027\u503C\u3002"),Kr=c(),Ns=o("li"),Qr=e("\u5F53\u663E\u793A\u5B9E\u9645\u6570\u636E\u503C\u65F6\uFF0C\u4E0D\u7528\u4F7F\u7528\u6BD4\u4F8B\u5C3A\uFF0C\u4F8B\u5982\uFF0C\u5728\u63D0\u793A\u6846\u6216\u6807\u7B7E\u4E2D\u7684 "),xF=o("code"),Jr=e("text()"),Xr=e(" \u65B9\u6CD5\u3002"),Nn=c(),bF=new d(!1),wF=c(),Ks=o("h3"),ya=o("a"),Yr=e("\u6DFB\u52A0\u5750\u6807\u8F74"),Kn=c(),w=o("ul"),j=o("li"),Zr=e("\u4F4D\u7F6E\uFF1A"),kF=o("code"),gr=e("axisLeft()"),sc=e(" \u548C "),SF=o("code"),lc=e("axisBottom()"),ac=e("\u3002"),oc=c(),IF=o("li"),Fc=e("g \u5143\u7D20\uFF0C g \u662F\u82F1\u6587\u4E2D\u7EC4\uFF08group\uFF09\u7684\u7F29\u5199\uFF0C\u5728\u6E32\u67D3\u65F6\uFF0C\u8F74\u53EA\u662F\u4E00\u6761\u76F4\u7EBF\u3002 \u56E0\u4E3A\u5B83\u662F\u4E00\u4E2A\u7B80\u5355\u7684\u56FE\u5F62\uFF0C\u6240\u4EE5\u53EF\u4EE5\u7528 g"),nc=c(),GF=o("li"),pc=e("SVG \u652F\u6301\u591A\u79CD transforms\uFF0C\u4F46\u662F\u5B9A\u4F4D\u8F74\u9700\u8981\u4F7F\u7528 translate \u5C5E\u6027"),Qn=c(),ia=o("p"),ec=e("\u4F8B\u5B50\uFF1A"),Jn=c(),VF=new d(!1),OF=c(),Qs=o("h2"),Da=o("a"),tc=e("\u5E38\u89C1\u56FE\u8868"),Xn=c(),Js=o("h3"),da=o("a"),rc=e("\u6563\u70B9\u56FE"),Yn=c(),va=o("blockquote"),jF=o("p"),cc=e("\u5706\u5708\u6765\u6620\u5C04\u6570\u636E\u70B9\uFF0C\u6BCF\u4E2A\u6570\u636E\u70B9\u6709\u4E24\u4E2A\u503C\u3002 \u8FD9\u4E24\u4E2A\u503C\u548C x \u548C y \u8F74\u76F8\u5173\u8054\uFF0C\u5728\u53EF\u89C6\u5316\u4E2D\u7528\u6765\u7ED9\u5706\u5708\u5B9A\u4F4D\u3002"),Zn=c(),HF=new d(!1),UF=c(),H=o("div"),Ec=o("hr"),yc=c(),BF=o("ol"),Xs=o("li"),ss=o("a"),ic=e("\u6570\u636E\u53EF\u89C6\u5316 \u8BA4\u8BC1 | freeCodeCamp.org"),Ys=o("a"),Dc=e("\u21A9"),this.h()},l(s){i=F(s,"P",{});var p=n(i);m=t(p,"\u5185\u5BB9\u51FA\u81EA\uFF1A"),u=F(p,"A",{href:!0,rel:!0,target:!0});var Uc=n(u);os=t(Uc,"FreeCodeCamp"),Uc.forEach(l),p.forEach(l),D=E(s),A=F(s,"BLOCKQUOTE",{});var Bc=n(A);k=F(Bc,"P",{});var dc=n(k);Lp=t(dc,"D3 \u6216 D3.js \u8868\u793A\u6570\u636E\u9A71\u52A8\u6587\u6863\u3002\u5B83\u662F\u4E00\u4E2A\u7528\u4E8E\u5728\u6D4F\u89C8\u5668\u4E2D\u521B\u5EFA\u52A8\u6001\u548C\u4EA4\u4E92\u5F0F\u6570\u636E\u89C6\u89C9\u5316\u7684 JavaScript \u5E93\u3002"),gs=F(dc,"SUP",{id:!0});var Tc=n(gs);Fs=F(Tc,"A",{href:!0,class:!0});var Pc=n(Fs);xp=t(Pc,"1"),Pc.forEach(l),Tc.forEach(l),dc.forEach(l),Bc.forEach(l),qF=E(s),ns=F(s,"H2",{id:!0});var qc=n(ns);sl=F(qc,"A",{href:!0});var Rc=n(sl);bp=t(Rc,"\u5B66\u4E60\u8D44\u6E90"),Rc.forEach(l),qc.forEach(l),RF=E(s),f=F(s,"UL",{});var C=n(f);wa=F(C,"LI",{});var zc=n(wa);U=F(zc,"A",{href:!0,rel:!0,target:!0});var Wc=n(U);wp=t(Wc,"D3.js - Data-Driven Documents"),Wc.forEach(l),zc.forEach(l),kp=E(C),ll=F(C,"LI",{});var vc=n(ll);B=F(vc,"A",{href:!0,rel:!0,target:!0});var Mc=n(B);Sp=t(Mc,"Data Visualization with D3 \u2013 Full Course for Beginners [2022] - YouTube"),Mc.forEach(l),S=F(vc,"UL",{});var fa=n(S);ka=F(fa,"LI",{});var $c=n(ka);T=F($c,"A",{href:!0,rel:!0,target:!0});var Nc=n(T);Ip=t(Nc,"Get it Right in Black & White Index - Get it Right in Black & White - VizHub Forum"),Nc.forEach(l),$c.forEach(l),Gp=E(fa),Sa=F(fa,"LI",{});var Kc=n(Sa);P=F(Kc,"A",{href:!0,rel:!0,target:!0});var Qc=n(P);Vp=t(Qc,"New Livestream Series: Get it Right in Black and White"),Qc.forEach(l),Kc.forEach(l),Op=E(fa),Ia=F(fa,"LI",{});var Jc=n(Ia);q=F(Jc,"A",{href:!0,rel:!0,target:!0});var Xc=n(q);jp=t(Xc,"Get it Right in Black & White Index - Get it Right in Black & White - VizHub Forum"),Xc.forEach(l),Jc.forEach(l),fa.forEach(l),vc.forEach(l),Hp=E(C),Ga=F(C,"LI",{});var Yc=n(Ga);R=F(Yc,"A",{href:!0,rel:!0,target:!0});var Zc=n(R);Up=t(Zc,"The D3 Graph Gallery \u2013 Simple charts made with d3.js"),Zc.forEach(l),Yc.forEach(l),Bp=E(C),Va=F(C,"LI",{});var gc=n(Va);z=F(gc,"A",{href:!0,rel:!0,target:!0});var sE=n(z);Tp=t(sE,"Introduction to D3.js | D3 in Depth"),sE.forEach(l),gc.forEach(l),Pp=E(C),Oa=F(C,"LI",{});var lE=n(Oa);W=F(lE,"A",{href:!0,rel:!0,target:!0});var aE=n(W);qp=t(aE,"\u6570\u636E\u53EF\u89C6\u5316 \u8BA4\u8BC1 | freeCodeCamp.org"),aE.forEach(l),lE.forEach(l),Rp=E(C),ja=F(C,"LI",{});var oE=n(ja);M=F(oE,"A",{href:!0,rel:!0,target:!0});var FE=n(M);zp=t(FE,"Amelia Wattenberger"),FE.forEach(l),oE.forEach(l),Wp=E(C),Ha=F(C,"LI",{});var nE=n(Ha);$=F(nE,"A",{href:!0,rel:!0,target:!0});var pE=n($);Mp=t(pE,"GitHub - xswei/d3js_doc: D3js \u4E2D\u6587\u6587\u6863 D3 \u4E2D\u6587"),pE.forEach(l),nE.forEach(l),C.forEach(l),zF=E(s),ps=F(s,"H2",{id:!0});var eE=n(ps);al=F(eE,"A",{href:!0});var tE=n(al);$p=t(tE,"\u57FA\u7840\u64CD\u4F5C"),tE.forEach(l),eE.forEach(l),WF=E(s),es=F(s,"H3",{id:!0});var rE=n(es);ol=F(rE,"A",{href:!0});var cE=n(ol);Np=t(cE,"\u4FEE\u6539\u5143\u7D20"),cE.forEach(l),rE.forEach(l),MF=E(s),_=F(s,"UL",{});var ls=n(_);ts=F(ls,"LI",{});var gn=n(ts);Ua=F(gn,"CODE",{});var EE=n(Ua);Kp=t(EE,"select()"),EE.forEach(l),Qp=t(gn," \uFF1A"),rs=F(gn,"UL",{});var sp=n(rs);Ba=F(sp,"LI",{});var yE=n(Ba);Jp=t(yE,"\u529F\u80FD\uFF1A\u4ECE\u6587\u6863\u4E2D\u9009\u62E9\u4E00\u4E2A\u5143\u7D20\u3002"),yE.forEach(l),Xp=E(sp),Ta=F(sp,"LI",{});var iE=n(Ta);Yp=t(iE,"\u53C2\u6570\uFF1A\u5B83\u63A5\u53D7\u4F60\u60F3\u8981\u9009\u62E9\u7684\u5143\u7D20\u7684\u540D\u5B57\u4F5C\u4E3A\u53C2\u6570\uFF0C\u5E76\u8FD4\u56DE\u6587\u6863\u4E2D\u7B2C\u4E00\u4E2A\u4E0E\u540D\u5B57\u5339\u914D\u7684 HTML \u8282\u70B9\u3002"),iE.forEach(l),sp.forEach(l),gn.forEach(l),Zp=E(ls),Fl=F(ls,"LI",{});var fc=n(Fl);Pa=F(fc,"CODE",{});var DE=n(Pa);gp=t(DE,"selectAll()"),DE.forEach(l),qa=F(fc,"UL",{});var dE=n(qa);Ra=F(dE,"LI",{});var vE=n(Ra);se=t(vE,"\u9009\u62E9\u4E00\u7EC4\u5143\u7D20\u3002 \u5E76\u4EE5 HTML \u8282\u70B9\u6570\u7EC4\u7684\u5F62\u5F0F\u8FD4\u56DE\u8BE5\u6587\u672C\u4E2D\u6240\u6709\u5339\u914D\u6240\u8F93\u5165\u5B57\u7B26\u4E32\u7684\u5BF9\u8C61"),vE.forEach(l),dE.forEach(l),fc.forEach(l),le=E(ls),nl=F(ls,"LI",{});var uc=n(nl);za=F(uc,"CODE",{});var fE=n(za);ae=t(fE,"append()"),fE.forEach(l),cs=F(uc,"UL",{});var lp=n(cs);Wa=F(lp,"LI",{});var uE=n(Wa);oe=t(uE,"\u529F\u80FD\uFF1A\u5C06 HTML \u8282\u70B9\u9644\u52A0\u5230\u9009\u5B9A\u9879\u76EE\uFF0C\u5E76\u8FD4\u56DE\u8BE5\u8282\u70B9\u7684\u53E5\u67C4\u3002"),uE.forEach(l),Fe=E(lp),Ma=F(lp,"LI",{});var AE=n(Ma);ne=t(AE,"\u53C2\u6570\uFF1A\u63A5\u6536\u4F60\u5E0C\u671B\u6DFB\u52A0\u5230\u6587\u6863\u4E2D\u7684\u5143\u7D20"),AE.forEach(l),lp.forEach(l),uc.forEach(l),pe=E(ls),pl=F(ls,"LI",{});var Ac=n(pl);$a=F(Ac,"CODE",{});var CE=n($a);ee=t(CE,"text()"),CE.forEach(l),Es=F(Ac,"UL",{});var ap=n(Es);Na=F(ap,"LI",{});var _E=n(Na);te=t(_E,"\u529F\u80FD\uFF1A\u8BBE\u7F6E\u6240\u9009\u8282\u70B9\u7684\u6587\u672C\uFF0C\u4E5F\u53EF\u4EE5\u83B7\u53D6\u5F53\u524D\u6587\u672C\u3002 \u4E5F\u53EF\u4EE5\u7528\u6765\u6DFB\u52A0\u6807\u7B7E"),_E.forEach(l),re=E(ap),Ka=F(ap,"LI",{});var hE=n(Ka);ce=t(hE,"\u53C2\u6570\uFF1A\u5B57\u7B26\u4E32\u6216\u8005\u56DE\u8C03\u51FD\u6570"),hE.forEach(l),ap.forEach(l),Ac.forEach(l),ls.forEach(l),$F=E(s),Qa=v(s,!1),Ja=E(s),el=F(s,"P",{});var mE=n(el);Ee=t(mE,"\u5728 D3 \u4E2D\u53EF\u4EE5\u4E32\u8054\u591A\u4E2A\u65B9\u6CD5\uFF0C\u8FDE\u7EED\u6267\u884C\u4E00\u7CFB\u5217\u64CD\u4F5C\u3002->[[function chaining|\u94FE\u5F0F\u8C03\u7528]]"),mE.forEach(l),NF=E(s),ys=F(s,"H3",{id:!0});var LE=n(ys);tl=F(LE,"A",{href:!0});var xE=n(tl);ye=t(xE,"\u4F7F\u7528\u6570\u636E"),xE.forEach(l),LE.forEach(l),KF=E(s),rl=F(s,"P",{});var bE=n(rl);N=F(bE,"A",{href:!0,rel:!0,target:!0});var wE=n(N);ie=t(wE,"d3-selection"),wE.forEach(l),bE.forEach(l),QF=E(s),K=F(s,"UL",{});var op=n(K);is=F(op,"LI",{});var Fp=n(is);Xa=F(Fp,"CODE",{});var kE=n(Xa);De=t(kE,"data()"),kE.forEach(l),de=t(Fp,"\uFF1A"),I=F(Fp,"UL",{});var ua=n(I);Ya=F(ua,"LI",{});var SE=n(Ya);ve=t(SE,"\u5C06\u5143\u7D20\u4E0E\u6570\u636E\u7ED1\u5B9A"),SE.forEach(l),fe=E(ua),Za=F(ua,"LI",{});var IE=n(Za);ue=t(IE,"\u4E0D\u9700\u8981\u5199 for \u5FAA\u73AF\u6216\u8005\u7528 forEach() \u8FED\u4EE3\u6570\u636E\u96C6\u4E2D\u7684\u5BF9\u8C61\u3002 data() \u65B9\u6CD5\u4F1A\u89E3\u6790\u6570\u636E\u96C6\uFF0C\u4EFB\u4F55\u94FE\u63A5\u5728 data() \u540E\u9762\u7684\u65B9\u6CD5\u90FD\u4F1A\u4E3A\u6570\u636E\u96C6\u4E2D\u7684\u6BCF\u4E2A\u5BF9\u8C61\u8FD0\u884C\u4E00\u6B21\u3002"),IE.forEach(l),Ae=E(ua),Ds=F(ua,"LI",{});var np=n(Ds);Ce=t(np,"\u53EF\u4EE5\u4F7F\u7528\u65B9\u62EC\u53F7\u7684\u65B9\u5F0F\uFF0C\u5982 "),ga=F(np,"CODE",{});var GE=n(ga);_e=t(GE,"d[0]"),GE.forEach(l),he=t(np,"\uFF0C\u6765\u8BBF\u95EE\u6570\u7EC4\u4E2D\u7684\u503C\u3002"),np.forEach(l),ua.forEach(l),Fp.forEach(l),me=E(op),cl=F(op,"LI",{});var Cc=n(cl);so=F(Cc,"CODE",{});var VE=n(so);Le=t(VE,"enter()"),VE.forEach(l),xe=t(Cc,"\uFF1A\u83B7\u53D6\u9700\u8981\u63D2\u5165\u7684\u9009\u62E9\u96C6(\u6570\u636E\u4E2A\u6570\u5927\u4E8E\u5143\u7D20\u4E2A\u6570)\u7684\u5360\u4F4D\u7B26."),Cc.forEach(l),op.forEach(l),JF=E(s),El=F(s,"BLOCKQUOTE",{});var OE=n(El);ds=F(OE,"P",{});var pp=n(ds);be=t(pp,"\u5F53 enter() \u548C data() \u65B9\u6CD5\u4E00\u8D77\u4F7F\u7528\u65F6\uFF0C\u5B83\u628A\u4ECE\u9875\u9762\u4E2D\u9009\u62E9\u7684\u5143\u7D20\u548C\u6570\u636E\u96C6\u4E2D\u7684\u5143\u7D20\u4F5C"),lo=F(pp,"STRONG",{});var jE=n(lo);we=t(jE,"\u6BD4\u8F83"),jE.forEach(l),ke=t(pp,"\u3002 \u5982\u679C\u9875\u9762\u4E2D\u9009\u62E9\u7684\u5143\u7D20\u8F83\u5C11\u5219\u521B\u5EFA\u7F3A\u5C11\u7684\u5143\u7D20\u3002"),pp.forEach(l),OE.forEach(l),XF=E(s),yl=F(s,"P",{});var HE=n(yl);Se=t(HE,"\u53EF\u4EE5\u7406\u89E3\u4E3A\u7BA1\u7406\u4ED3\u5E93\u7684\uFF0C\u9009\u62E9\u7684\u5143\u7D20\u662F\u8D27\u67B6\uFF0C\u6570\u636E\u662F\u8D27\uFF0C\u5982\u679C\u8D27\u67B6\u4E0D\u591F\u4E86\uFF0C\u5C31\u518D\u8865\u51E0\u4E2A\u8D27\u67B6\uFF0C\u5982\u679C\u591A\u4E86\u5C31\u4E0D\u7BA1"),HE.forEach(l),YF=E(s),ao=v(s,!1),oo=E(s),vs=F(s,"H3",{id:!0});var UE=n(vs);il=F(UE,"A",{href:!0});var BE=n(il);Ie=t(BE,"\u4F7F\u7528\u52A8\u6001\u6570\u636E"),BE.forEach(l),UE.forEach(l),ZF=E(s),Dl=F(s,"P",{});var TE=n(Dl);Ge=t(TE,"text \u4E2D\u8BBE\u7F6E\u56DE\u8C03\u5904\u7406\u6570\u636E\u5982\uFF1A"),TE.forEach(l),gF=E(s),dl=F(s,"UL",{});var PE=n(dl);vl=F(PE,"LI",{});var _c=n(vl);Fo=F(_c,"CODE",{});var qE=n(Fo);Ve=t(qE,"d3.json()"),qE.forEach(l),Oe=t(_c,": \u4ECE\u6307\u5B9A\u7684 input URL \u83B7\u53D6 JSON \u6587\u4EF6\u3002\u5982\u679C\u6307\u5B9A\u4E86 init \u5219\u4F1A\u5C06\u5176\u4F20\u9012\u7ED9\u5E95\u5C42\u7684 fetch \u65B9\u6CD5"),_c.forEach(l),PE.forEach(l),sn=E(s),no=v(s,!1),po=E(s),fs=F(s,"H3",{id:!0});var RE=n(fs);fl=F(RE,"A",{href:!0});var zE=n(fl);je=t(zE,"\u7ED9\u5143\u7D20\u6DFB\u52A0\u5185\u8054\u6837\u5F0F"),zE.forEach(l),RE.forEach(l),ln=E(s),ul=F(s,"UL",{});var WE=n(ul);Al=F(WE,"LI",{});var hc=n(Al);eo=F(hc,"CODE",{});var ME=n(eo);He=t(ME,"style()"),ME.forEach(l),us=F(hc,"UL",{});var ep=n(us);to=F(ep,"LI",{});var $E=n(to);Ue=t($E,"\u529F\u80FD\uFF1A\u5728\u52A8\u6001\u5143\u7D20\u4E0A\u6DFB\u52A0\u5185\u8054 CSS \u6837\u5F0F"),$E.forEach(l),Be=E(ep),ro=F(ep,"LI",{});var NE=n(ro);Te=t(NE,"\u53C2\u6570\uFF1A\u4EE5\u7528\u9017\u53F7\u5206\u9694\u7684\u952E\u503C\u5BF9\u4F5C\u4E3A\u53C2\u6570"),NE.forEach(l),ep.forEach(l),hc.forEach(l),WE.forEach(l),an=E(s),co=v(s,!1),Eo=E(s),As=F(s,"H3",{id:!0});var KE=n(As);Cl=F(KE,"A",{href:!0});var QE=n(Cl);Pe=t(QE,"\u6DFB\u52A0 Class"),QE.forEach(l),KE.forEach(l),on=E(s),_l=F(s,"UL",{});var JE=n(_l);hl=F(JE,"LI",{});var mc=n(hl);yo=F(mc,"CODE",{});var XE=n(yo);qe=t(XE,"attr()"),XE.forEach(l),G=F(mc,"UL",{});var Aa=n(G);io=F(Aa,"LI",{});var YE=n(io);Re=t(YE,"\u529F\u80FD\uFF1A\u53EF\u4EE5\u7ED9\u5143\u7D20\u6DFB\u52A0\u4EFB\u4F55 HTML \u5C5E\u6027\uFF0C\u5305\u62EC class \u540D\u79F0\u3002"),YE.forEach(l),ze=E(Aa),ml=F(Aa,"LI",{});var Lc=n(ml);We=t(Lc,"\u53C2\u6570\uFF1A"),Cs=F(Lc,"UL",{});var tp=n(Cs);Do=F(tp,"LI",{});var ZE=n(Do);Me=t(ZE,"attr() \u65B9\u6CD5\u548C style() \u7684\u4F7F\u7528\u65B9\u6CD5\u4E00\u6837\u3002 \u5B83\u4F7F\u7528\u9017\u53F7\u5206\u9694\u503C\uFF0C\u5E76\u4E14\u53EF\u4EE5\u4F7F\u7528\u56DE\u8C03\u51FD\u6570"),ZE.forEach(l),$e=E(tp),_s=F(tp,"LI",{});var rp=n(_s);Ne=t(rp,"\u53EF\u63A5\u6536\u4E00\u4E2A\u56DE\u8C03\u51FD\u6570\u6765\u52A8\u6001\u8BBE\u7F6E\u5C5E\u6027\u3002 \u8FD9\u4E2A\u56DE\u8C03\u51FD\u6570\u6709\u4E24\u4E2A\u53C2\u6570\uFF0C\u4E00\u4E2A\u662F\u6570\u636E\u70B9\u672C\u8EAB\uFF08\u901A\u5E38\u662F "),vo=F(rp,"CODE",{});var gE=n(vo);Ke=t(gE,"d"),gE.forEach(l),Qe=t(rp,"\uFF09\uFF0C\u53E6\u4E00\u4E2A\u662F\u8BE5\u6570\u636E\u70B9\u5728\u6570\u7EC4\u4E2D\u7684\u4E0B\u6807 i\uFF0C \u8FD9\u4E2A\u53C2\u6570\u662F\u53EF\u9009\u7684"),rp.forEach(l),tp.forEach(l),Lc.forEach(l),Je=E(Aa),fo=F(Aa,"LI",{});var sy=n(fo);Xe=t(sy,"\u5F53\u9700\u8981\u6DFB\u52A0 class \u65F6\uFF0Cclass \u53C2\u6570\u4FDD\u6301\u4E0D\u53D8\uFF0C\u53EA\u6709 container \u53C2\u6570\u4F1A\u53D1\u751F\u53D8\u5316\u3002"),sy.forEach(l),Aa.forEach(l),mc.forEach(l),JE.forEach(l),Fn=E(s),uo=v(s,!1),Ao=E(s),hs=F(s,"H3",{id:!0});var ly=n(hs);Ll=F(ly,"A",{href:!0});var ay=n(Ll);Ye=t(ay,"\u6807\u7B7E"),ay.forEach(l),ly.forEach(l),nn=E(s),Q=F(s,"UL",{});var cp=n(Q);Co=F(cp,"LI",{});var oy=n(Co);Ze=t(oy,"\u548C rect \u5143\u7D20\u7C7B\u4F3C\uFF0Ctext \u5143\u7D20\u4E5F\u9700\u8981 x \u548C y \u5C5E\u6027\u6765\u6307\u5B9A\u5176\u653E\u7F6E\u5728 SVG \u753B\u5E03\u4E0A\u7684\u4F4D\u7F6E\uFF0C \u5B83\u4E5F\u9700\u8981\u80FD\u591F\u83B7\u53D6\u6570\u636E\u6765\u663E\u793A\u6570\u636E\u503C\u3002"),oy.forEach(l),ge=E(cp),xl=F(cp,"LI",{});var xc=n(xl);st=t(xc,"\u6807\u7B7E\u6837\u5F0F"),ms=F(xc,"UL",{});var Ep=n(ms);bl=F(Ep,"LI",{});var bc=n(bl);_o=F(bc,"CODE",{});var Fy=n(_o);lt=t(Fy,"fill"),Fy.forEach(l),at=t(bc," \u5C5E\u6027\u4E3A text \u8282\u70B9\u8BBE\u7F6E\u6587\u672C\u989C\u8272"),bc.forEach(l),ot=E(Ep),wl=F(Ep,"LI",{});var wc=n(wl);ho=F(wc,"CODE",{});var ny=n(ho);Ft=t(ny,"style()"),ny.forEach(l),nt=t(wc," \u65B9\u6CD5\u8BBE\u7F6E\u5176\u5B83\u6837\u5F0F\u7684 CSS \u89C4\u5219\uFF0C\u4F8B\u5982 font-family \u6216 font-size\u3002"),wc.forEach(l),Ep.forEach(l),xc.forEach(l),cp.forEach(l),pn=E(s),mo=v(s,!1),Lo=E(s),Ls=F(s,"H3",{id:!0});var py=n(Ls);kl=F(py,"A",{href:!0});var ey=n(kl);pt=t(ey,"\u6DFB\u52A0\u5DE5\u5177\u63D0\u793A tooltip"),ey.forEach(l),py.forEach(l),en=E(s),Sl=F(s,"UL",{});var ty=n(Sl);xo=F(ty,"LI",{});var ry=n(xo);et=t(ry,"\u5F53\u7528\u6237\u5728\u4E00\u4E2A\u5BF9\u8C61\u4E0A\u60AC\u505C\u65F6\uFF0C\u63D0\u793A\u6846\u53EF\u4EE5\u663E\u793A\u5173\u4E8E\u8FD9\u4E2A\u5BF9\u8C61\u66F4\u591A\u7684\u4FE1\u606F"),ry.forEach(l),ty.forEach(l),tn=E(s),Il=F(s,"OL",{});var cy=n(Il);bo=F(cy,"LI",{});var Ey=n(bo);tt=t(Ey,"title"),Ey.forEach(l),cy.forEach(l),rn=E(s),wo=v(s,!1),ko=E(s),xs=F(s,"H2",{id:!0});var yy=n(xs);Gl=F(yy,"A",{href:!0});var iy=n(Gl);rt=t(iy,"SVG"),iy.forEach(l),yy.forEach(l),cn=E(s),Vl=F(s,"UL",{});var Dy=n(Vl);So=F(Dy,"LI",{});var dy=n(So);ct=t(dy,"\u5750\u6807\u7CFB\uFF1A\u5750\u6807\u8F74\u7684\u539F\u70B9\u5728\u5DE6\u4E0A\u89D2\u3002 x \u5750\u6807\u4E3A 0 \u5C06\u56FE\u5F62\u653E\u5728 SVG \u533A\u57DF\u7684\u5DE6\u8FB9\u7F18\uFF0C y \u5750\u6807\u4E3A 0 \u5C06\u56FE\u5F62\u653E\u5728 SVG \u533A\u57DF\u7684\u4E0A\u8FB9\u7F18\u3002 x \u503C\u589E\u5927\u77E9\u5F62\u5C06\u5411\u53F3\u79FB\u52A8\uFF0C y \u503C\u589E\u5927\u77E9\u5F62\u5C06\u5411\u4E0B\u79FB\u52A8\u3002"),dy.forEach(l),Dy.forEach(l),En=E(s),bs=F(s,"H3",{id:!0});var vy=n(bs);Ol=F(vy,"A",{href:!0});var fy=n(Ol);Et=t(fy,"\u521B\u5EFA SVG"),fy.forEach(l),vy.forEach(l),yn=E(s),Io=v(s,!1),Go=E(s),ws=F(s,"H3",{id:!0});var uy=n(ws);jl=F(uy,"A",{href:!0});var Ay=n(jl);yt=t(Ay,"\u53CD\u8F6C SVG \u5143\u7D20"),Ay.forEach(l),uy.forEach(l),Dn=E(s),Hl=F(s,"UL",{});var Cy=n(Hl);Vo=F(Cy,"LI",{});var _y=n(Vo);it=t(_y,"\u4E3A\u4E86\u4F7F\u6761\u5F62\u56FE\u5411\u4E0A\uFF0C\u9700\u8981\u6539\u53D8 y \u5750\u6807\u8BA1\u7B97\u7684\u65B9\u5F0F"),_y.forEach(l),Cy.forEach(l),dn=E(s),Ul=F(s,"BLOCKQUOTE",{});var hy=n(Ul);Oo=F(hy,"P",{});var my=n(Oo);Dt=t(my,"SVG \u533A\u57DF\u7684\u9AD8\u5EA6\u4E3A 100\u3002 \u5982\u679C\u5728\u96C6\u5408\u4E2D\u4E00\u4E2A\u6570\u636E\u70B9\u7684\u503C\u4E3A 0\uFF0C\u90A3\u4E48\u6761\u5F62\u5C06\u4ECE SVG \u533A\u57DF\u7684\u6700\u5E95\u7AEF\u5F00\u59CB\uFF08\u800C\u4E0D\u662F\u9876\u7AEF\uFF09\u3002 \u4E3A\u6B64\uFF0Cy \u5750\u6807\u7684\u503C\u5E94\u4E3A 100\u3002 \u5982\u679C\u6570\u636E\u70B9\u7684\u503C\u4E3A 1\uFF0C\u4F60\u5C06\u4ECE y \u5750\u6807\u4E3A 100 \u5F00\u59CB\u6765\u5C06\u8FD9\u4E2A\u6761\u5F62\u8BBE\u7F6E\u5728\u5E95\u7AEF\uFF0C \u7136\u540E\u9700\u8981\u8003\u8651\u8BE5\u6761\u5F62\u7684\u9AD8\u5EA6\u4E3A 1\uFF0C\u6240\u4EE5\u6700\u7EC8\u7684 y \u5750\u6807\u5C06\u662F 99\u3002"),my.forEach(l),hy.forEach(l),vn=E(s),Bl=F(s,"P",{});var Ly=n(Bl);dt=t(Ly,"(\u9AD8\u5EA6\u4ECE\u4E0B\u9762\u5F00\u59CB\u8BA1\u7B97\uFF0C\u5750\u6807\u8F74\u4ECE\u4E0A\u9762\u5F00\u59CB)"),Ly.forEach(l),fn=E(s),J=F(s,"UL",{});var yp=n(J);ks=F(yp,"LI",{});var ip=n(ks);vt=t(ip,"y \u5750\u6807\u4E3A "),jo=F(ip,"CODE",{});var xy=n(jo);ft=t(xy,"y = heightOfSVG - heightOfBar"),xy.forEach(l),ut=t(ip," \u4F1A\u5C06\u6761\u5F62\u56FE\u5411\u4E0A\u653E\u7F6E\u3002"),ip.forEach(l),At=E(yp),Ss=F(yp,"LI",{});var Dp=n(Ss);Ct=t(Dp,"\u901A\u5E38\uFF0C\u5173\u7CFB\u662F "),Ho=F(Dp,"CODE",{});var by=n(Ho);_t=t(by,"y = h - m * d"),by.forEach(l),ht=t(Dp,"\uFF0C\u5176\u4E2D m \u662F\u7F29\u653E\u6570\u636E\u70B9\u7684\u5E38\u6570\u3002"),Dp.forEach(l),yp.forEach(l),un=E(s),Is=F(s,"H3",{id:!0});var wy=n(Is);Tl=F(wy,"A",{href:!0});var ky=n(Tl);mt=t(ky,"\u66F4\u6539 SVG \u5143\u7D20\u7684\u989C\u8272"),ky.forEach(l),wy.forEach(l),An=E(s),Pl=F(s,"UL",{});var Sy=n(Pl);Gs=F(Sy,"LI",{});var dp=n(Gs);Lt=t(dp,"\u5728 SVG \u4E2D\uFF0C rect \u56FE\u5F62\u7528 "),Uo=F(dp,"CODE",{});var Iy=n(Uo);xt=t(Iy,"fill"),Iy.forEach(l),bt=t(dp," \u5C5E\u6027\u7740\u8272\u3002 \u5B83\u652F\u6301\u5341\u516D\u8FDB\u5236\u4EE3\u7801\u3001\u989C\u8272\u540D\u79F0\u3001rgb \u503C\u4EE5\u53CA\u66F4\u590D\u6742\u7684\u9009\u9879\uFF0C\u6BD4\u5982\u6E10\u53D8\u548C\u900F\u660E\u3002"),dp.forEach(l),Sy.forEach(l),Cn=E(s),Bo=v(s,!1),To=E(s),Vs=F(s,"H3",{id:!0});var Gy=n(Vs);ql=F(Gy,"A",{href:!0});var Vy=n(ql);wt=t(Vy,"SVG \u56FE\u5F62"),Vy.forEach(l),Gy.forEach(l),_n=E(s),Rl=F(s,"UL",{});var Oy=n(Rl);Po=F(Oy,"LI",{});var jy=n(Po);kt=t(jy,"SVG \u652F\u6301\u591A\u79CD\u56FE\u5F62\uFF0C\u6BD4\u5982\u77E9\u5F62\u548C\u5706\u5F62\uFF0C \u5E76\u7528\u5B83\u4EEC\u6765\u663E\u793A\u6570\u636E\u3002"),jy.forEach(l),Oy.forEach(l),hn=E(s),Os=F(s,"H4",{id:!0});var Hy=n(Os);zl=F(Hy,"A",{href:!0});var Uy=n(zl);St=t(Uy,"\u77E9\u5F62"),Uy.forEach(l),Hy.forEach(l),mn=E(s),Wl=F(s,"P",{});var By=n(Wl);It=t(By,"SVG \u7684 rect \u6709\u56DB\u4E2A\u5C5E\u6027\u3002 x \u548C y \u5750\u6807\u6307\u5B9A\u56FE\u5F62\u653E\u5728 svg \u533A\u57DF\u7684\u4F4D\u7F6E\uFF0C height \u548C width \u6307\u5B9A\u56FE\u5F62\u5927\u5C0F"),By.forEach(l),Ln=E(s),qo=v(s,!1),Ro=E(s),js=F(s,"H4",{id:!0});var Ty=n(js);Ml=F(Ty,"A",{href:!0});var Py=n(Ml);Gt=t(Py,"\u5706\u5F62"),Py.forEach(l),Ty.forEach(l),xn=E(s),L=F(s,"UL",{});var Ca=n(L);zo=F(Ca,"LI",{});var qy=n(zo);Vt=t(qy,"SVG \u7528 circle \u6807\u7B7E\u6765\u521B\u5EFA\u5706\u5F62"),qy.forEach(l),Ot=E(Ca),$l=F(Ca,"LI",{});var kc=n($l);jt=t(kc,"circle \u6709\u4E09\u4E2A\u4E3B\u8981\u7684\u5C5E\u6027\u3002"),Hs=F(kc,"UL",{});var vp=n(Hs);Wo=F(vp,"LI",{});var Ry=n(Wo);Ht=t(Ry,"cx \u548C cy \u5C5E\u6027\u662F\u5750\u6807\u3002 \u5B83\u4EEC\u544A\u8BC9 D3 \u5C06\u56FE\u5F62\u7684\u4E2D\u5FC3\u653E\u5728 SVG \u753B\u5E03\u7684\u4F55\u5904\u3002"),Ry.forEach(l),Ut=E(vp),Mo=F(vp,"LI",{});var zy=n(Mo);Bt=t(zy,"\u534A\u5F84\uFF08 r \u5C5E\u6027\uFF09\u7ED9\u51FA circle \u7684\u5927\u5C0F\u3002"),zy.forEach(l),vp.forEach(l),kc.forEach(l),Tt=E(Ca),$o=F(Ca,"LI",{});var Wy=n($o);Pt=t(Wy,"\u548C rect \u7684 y \u5750\u6807\u4E00\u6837\uFF0Ccircle \u7684 cy \u5C5E\u6027\u662F\u4ECE SVG \u753B\u5E03\u7684\u9876\u7AEF\u5F00\u59CB\u6D4B\u91CF\u7684\uFF0C\u800C\u4E0D\u662F\u4ECE\u5E95\u7AEF\u3002"),Wy.forEach(l),Ca.forEach(l),bn=E(s),No=v(s,!1),Ko=E(s),Us=F(s,"H2",{id:!0});var My=n(Us);Nl=F(My,"A",{href:!0});var $y=n(Nl);qt=t($y,"\u6BD4\u4F8B\u5C3A"),$y.forEach(l),My.forEach(l),wn=E(s),Bs=F(s,"H3",{id:!0});var Ny=n(Bs);Kl=F(Ny,"A",{href:!0});var Ky=n(Kl);Rt=t(Ky,"\u521B\u5EFA\u7EBF\u6027\u6BD4\u4F8B"),Ky.forEach(l),Ny.forEach(l),kn=E(s),Ql=F(s,"BLOCKQUOTE",{});var Qy=n(Ql);Qo=F(Qy,"P",{});var Jy=n(Qo);zt=t(Jy,"\u6761\u5F62\u56FE\u548C\u6563\u70B9\u56FE\u90FD\u76F4\u63A5\u5728 SVG \u753B\u5E03\u4E0A\u7ED8\u5236\u6570\u636E\u3002 \u4F46\u662F\uFF0C\u5982\u679C\u4E00\u7EC4\u7684\u9AD8\u6216\u8005\u5176\u4E2D\u4E00\u4E2A\u6570\u636E\u70B9\u6BD4 SVG \u7684\u9AD8\u6216\u5BBD\u66F4\u5927\uFF0C\u5B83\u5C06\u8DD1\u5230 SVG \u533A\u57DF\u5916\u3002"),Jy.forEach(l),Qy.forEach(l),Sn=E(s),Jl=F(s,"BLOCKQUOTE",{});var Xy=n(Jl);Jo=F(Xy,"P",{});var Yy=n(Jo);Wt=t(Yy,"D3 \u4E2D\uFF0C\u6BD4\u4F8B\u5C3A\u53EF\u5E2E\u52A9\u5E03\u5C40\u6570\u636E\u3002 scales \u662F\u51FD\u6570\uFF0C\u5B83\u544A\u8BC9\u7A0B\u5E8F\u5982\u4F55\u5C06\u4E00\u7EC4\u539F\u59CB\u6570\u636E\u70B9\u6620\u5C04\u5230 SVG \u753B\u5E03\u4E0A\u3002"),Yy.forEach(l),Xy.forEach(l),In=E(s),Ts=F(s,"H4",{id:!0});var Zy=n(Ts);Xl=F(Zy,"A",{href:!0});var gy=n(Xl);Mt=t(gy,"\u7EBF\u6027\u7F29\u653E"),gy.forEach(l),Zy.forEach(l),Gn=E(s),X=F(s,"UL",{});var fp=n(X);Xo=F(fp,"LI",{});var si=n(Xo);$t=t(si,"\u901A\u5E38\u4F7F\u7528\u4E8E\u5B9A\u91CF\u6570\u636E"),si.forEach(l),Nt=E(fp),Yo=F(fp,"LI",{});var li=n(Yo);Kt=t(li,"\u9ED8\u8BA4\u60C5\u51B5\u4E0B\uFF0C\u6BD4\u4F8B\u5C3A\u4F7F\u7528\u4E00\u5BF9\u4E00\u5173\u7CFB\uFF08identity relationship\uFF09\u3002 \u8F93\u5165\u7684\u503C\u548C\u8F93\u51FA\u7684\u503C\u76F8\u540C\u3002"),li.forEach(l),fp.forEach(l),Vn=E(s),Zo=v(s,!1),go=E(s),Yl=F(s,"P",{});var ai=n(Yl);Qt=t(ai,"\u4F8B\u5B50"),ai.forEach(l),On=E(s),sF=v(s,!1),lF=E(s),Ps=F(s,"H4",{id:!0});var oi=n(Ps);Zl=F(oi,"A",{href:!0});var Fi=n(Zl);Jt=t(Fi,"\u6309\u6BD4\u4F8B\u8BBE\u7F6E\u57DF\u548C\u8303\u56F4"),Fi.forEach(l),oi.forEach(l),jn=E(s),x=F(s,"UL",{});var _a=n(x);qs=F(_a,"LI",{});var up=n(qs);Xt=t(up,"\u57DF domain\uFF1A\u5047\u8BBE\u6709\u4E00\u4E2A\u6570\u636E\u96C6\u8303\u56F4\u4E3A 50 \u5230 480\uFF0C \u8FD9\u662F\u7F29\u653E\u7684"),aF=F(up,"STRONG",{});var ni=n(aF);Yt=t(ni,"\u8F93\u5165\u4FE1\u606F"),ni.forEach(l),Zt=t(up,"\uFF0C\u4E5F\u88AB\u79F0\u4E3A\u57DF\u3002"),up.forEach(l),gt=E(_a),Rs=F(_a,"LI",{});var Ap=n(Rs);sr=t(Ap,"\u8303\u56F4 range\uFF1A\u6CBF\u7740 x \u8F74\u5C06\u8FD9\u4E9B\u70B9\u6620\u5C04\u5230 SVG \u753B\u5E03\u4E0A\uFF0C\u4F4D\u7F6E\u4ECB\u4E8E 10 \u4E2A\u5355\u4F4D\u5230 500 \u4E2A\u5355\u4F4D\u4E4B\u95F4\u3002 \u8FD9\u662F"),oF=F(Ap,"STRONG",{});var pi=n(oF);lr=t(pi,"\u8F93\u51FA\u4FE1\u606F"),pi.forEach(l),ar=t(Ap,"\uFF0C\u4E5F\u88AB\u79F0\u4E3A\u8303\u56F4\u3002"),Ap.forEach(l),or=E(_a),V=F(_a,"LI",{});var ha=n(V);FF=F(ha,"CODE",{});var ei=n(FF);Fr=t(ei,"domain()"),ei.forEach(l),nr=t(ha," \u548C "),nF=F(ha,"CODE",{});var ti=n(nF);pr=t(ti,"range()"),ti.forEach(l),er=t(ha," \u65B9\u6CD5\u8BBE\u7F6E\u6BD4\u4F8B\u5C3A\u7684\u503C\uFF0C \u5B83\u4EEC\u90FD\u63A5\u53D7\u4E00\u4E2A\u81F3\u5C11\u6709\u4E24\u4E2A\u5143\u7D20\u7684\u6570\u7EC4\u4F5C\u4E3A\u53C2\u6570\u3002"),zs=F(ha,"UL",{});var Cp=n(zs);gl=F(Cp,"LI",{});var Sc=n(gl);pF=F(Sc,"CODE",{});var ri=n(pF);tr=t(ri,"domain()"),ri.forEach(l),rr=t(Sc," \u65B9\u6CD5\u7ED9\u6BD4\u4F8B\u5C3A\u4F20\u9012\u5173\u4E8E\u6563\u70B9\u56FE\u539F\u6570\u636E\u503C\u7684\u4FE1\u606F"),Sc.forEach(l),cr=E(Cp),sa=F(Cp,"LI",{});var Ic=n(sa);eF=F(Ic,"CODE",{});var ci=n(eF);Er=t(ci,"range()"),ci.forEach(l),yr=t(Ic," \u65B9\u6CD5\u7ED9\u51FA\u5728\u9875\u9762\u4E0A\u8FDB\u884C\u53EF\u89C6\u5316\u7684\u5B9E\u9645\u7A7A\u95F4\u4FE1\u606F"),Ic.forEach(l),Cp.forEach(l),ha.forEach(l),_a.forEach(l),Hn=E(s),la=F(s,"P",{});var Ei=n(la);ir=t(Ei,"\u4F8B\u5B50\uFF1A"),Ei.forEach(l),Un=E(s),tF=v(s,!1),rF=E(s),aa=F(s,"P",{});var yi=n(aa);Dr=t(yi,"\u6309\u987A\u5E8F\uFF0C\u5C06\u5728\u63A7\u5236\u53F0\u4E2D\u663E\u793A\u4EE5\u4E0B\u503C\uFF1A10\u3001500\u3001323.37 \u548C 807.67\u3002"),yi.forEach(l),Bn=E(s),oa=F(s,"P",{});var ii=n(oa);dr=t(ii,"\u6CE8\u610F\uFF0C\u6BD4\u4F8B\u5C3A\u4F7F\u7528\u4E86\u57DF\u548C\u8303\u56F4\u4E4B\u95F4\u7684\u7EBF\u6027\u5173\u7CFB\u6765\u627E\u51FA\u7ED9\u5B9A\u6570\u5B57\u7684\u8F93\u51FA\u503C\u3002 \u57DF\u4E2D\u7684\u6700\u5C0F\u503C\uFF0850\uFF09\u6620\u5C04\u4E3A\u8303\u56F4\u4E2D\u7684\u6700\u5C0F\u503C\uFF0810\uFF09\u3002"),ii.forEach(l),Tn=E(s),Fa=F(s,"P",{});var Di=n(Fa);vr=t(Di,"\uFF08\u4E5F\u5C31\u662F\u7ED9\u5B9A\u8303\u56F4\uFF0C\u7528\u7EBF\u6027\u5173\u7CFB\u7F29\u5C0F\uFF0C\u6BD4\u5982\u56FE\u7247\u653E\u5927\u7F29\u5C0F\uFF0C\u7ED9\u4E86\u539F\u56FE\u5927\u5C0F\u548C\u7F29\u5C0F\u540E\u7684\u56FE\u7247\u5927\u5C0F\uFF0C\u6839\u636E\u7EBF\u6027\u5173\u7CFB\u6BD4\u4F8B\u6765\u8BA1\u7B97\u6BCF\u4E2A\u50CF\u7D20\u7684\u4F4D\u7F6E\uFF0C\u5143\u7D20\u7684\u5927\u5C0F\uFF09"),Di.forEach(l),Pn=E(s),Ws=F(s,"H4",{id:!0});var di=n(Ws);na=F(di,"A",{href:!0});var vi=n(na);fr=t(vi,"\u6700\u5C0F\u503C\u6700\u5927\u503C"),vi.forEach(l),di.forEach(l),qn=E(s),h=F(s,"UL",{});var as=n(h);pa=F(as,"LI",{});var Gc=n(pa);cF=F(Gc,"CODE",{});var fi=n(cF);ur=t(fi,"d3.min"),fi.forEach(l),Ar=t(Gc,"\uFF1A\u6700\u5C0F\u503C"),Gc.forEach(l),Cr=E(as),ea=F(as,"LI",{});var Vc=n(ea);EF=F(Vc,"CODE",{});var ui=n(EF);_r=t(ui,"d3.max"),ui.forEach(l),hr=t(Vc,": \u6700\u5927\u503C"),Vc.forEach(l),mr=E(as),Y=F(as,"LI",{});var TF=n(Y);yF=F(TF,"CODE",{});var Ai=n(yF);Lr=t(Ai,"min()"),Ai.forEach(l),xr=t(TF," \u548C "),iF=F(TF,"CODE",{});var Ci=n(iF);br=t(Ci,"max()"),Ci.forEach(l),wr=t(TF," \u90FD\u53EF\u4EE5\u4F7F\u7528\u56DE\u8C03\u51FD\u6570\uFF0C\u4E0B\u9762\u4F8B\u5B50\u4E2D\u56DE\u8C03\u51FD\u6570\u7684\u53C2\u6570 d \u662F\u5F53\u524D\u7684\u5185\u90E8\u6570\u7EC4\u3002"),TF.forEach(l),kr=E(as),Z=F(as,"LI",{});var PF=n(Z);DF=F(PF,"CODE",{});var _i=n(DF);Sr=t(_i,"min()"),_i.forEach(l),Ir=t(PF," \u548C "),dF=F(PF,"CODE",{});var hi=n(dF);Gr=t(hi,"max()"),hi.forEach(l),Vr=t(PF," \u65B9\u6CD5\u5728\u8BBE\u7F6E\u6BD4\u4F8B\u5C3A\u65F6\u5341\u5206\u6709\u7528"),PF.forEach(l),as.forEach(l),Rn=E(s),ta=F(s,"P",{});var mi=n(ta);Or=t(mi,"\u4F8B\u5B50\uFF1A\u627E\u5230\u4E8C\u7EF4\u6570\u7EC4\u7684\u6700\u5927\u503C\u548C\u6700\u5C0F\u503C"),mi.forEach(l),zn=E(s),vF=v(s,!1),fF=E(s),Ms=F(s,"H3",{id:!0});var Li=n(Ms);ra=F(Li,"A",{href:!0});var xi=n(ra);jr=t(xi,"\u4F7F\u7528\u52A8\u6001\u6BD4\u4F8B"),xi.forEach(l),Li.forEach(l),Wn=E(s),b=F(s,"UL",{});var ma=n(b);O=F(ma,"LI",{});var La=n(O);Hr=t(La,"\u7528"),uF=F(La,"CODE",{});var bi=n(uF);Ur=t(bi,"min()"),bi.forEach(l),Br=t(La," \u548C "),AF=F(La,"CODE",{});var wi=n(AF);Tr=t(wi,"max()"),wi.forEach(l),Pr=t(La," \u6765\u786E\u5B9A\u6BD4\u4F8B\u5C3A\u8303\u56F4\u548C\u57DF"),La.forEach(l),qr=E(ma),ca=F(ma,"LI",{});var Oc=n(ca);CF=F(Oc,"CODE",{});var ki=n(CF);Rr=t(ki,"padding"),ki.forEach(l),zr=t(Oc," \u5C06\u5728\u6563\u70B9\u56FE\u548C SVG \u753B\u5E03\u8FB9\u7F18\u4E4B\u95F4\u6DFB\u52A0\u7A7A\u9699\u3002"),Oc.forEach(l),Wr=E(ma),_F=F(ma,"LI",{});var Si=n(_F);Mr=t(Si,"\u4FDD\u6301\u7ED8\u56FE\u5728\u53F3\u4E0A\u89D2\u3002 \u5F53\u4E3A y \u5750\u6807\u8BBE\u7F6E range \u65F6\uFF0C\u5927\u7684\u503C\uFF08height \u51CF\u53BB padding\uFF09\u662F\u7B2C\u4E00\u4E2A\u53C2\u6570\uFF0C\u5C0F\u7684\u503C\u662F\u7B2C\u4E8C\u4E2A\u53C2\u6570\u3002"),Si.forEach(l),ma.forEach(l),Mn=E(s),hF=v(s,!1),mF=E(s),$s=F(s,"H3",{id:!0});var Ii=n($s);Ea=F(Ii,"A",{href:!0});var Gi=n(Ea);$r=t(Gi,"\u4F7F\u7528\u9884\u5B9A\u4E49\u7684\u6BD4\u4F8B\u653E\u7F6E\u5143\u7D20"),Gi.forEach(l),Ii.forEach(l),$n=E(s),g=F(s,"UL",{});var _p=n(g);LF=F(_p,"LI",{});var Vi=n(LF);Nr=t(Vi,"\u7528\u6BD4\u4F8B\u5C3A\u51FD\u6570\u4E3A SVG \u56FE\u5F62\u8BBE\u7F6E\u5750\u6807\u5C5E\u6027\u503C\u3002"),Vi.forEach(l),Kr=E(_p),Ns=F(_p,"LI",{});var hp=n(Ns);Qr=t(hp,"\u5F53\u663E\u793A\u5B9E\u9645\u6570\u636E\u503C\u65F6\uFF0C\u4E0D\u7528\u4F7F\u7528\u6BD4\u4F8B\u5C3A\uFF0C\u4F8B\u5982\uFF0C\u5728\u63D0\u793A\u6846\u6216\u6807\u7B7E\u4E2D\u7684 "),xF=F(hp,"CODE",{});var Oi=n(xF);Jr=t(Oi,"text()"),Oi.forEach(l),Xr=t(hp," \u65B9\u6CD5\u3002"),hp.forEach(l),_p.forEach(l),Nn=E(s),bF=v(s,!1),wF=E(s),Ks=F(s,"H3",{id:!0});var ji=n(Ks);ya=F(ji,"A",{href:!0});var Hi=n(ya);Yr=t(Hi,"\u6DFB\u52A0\u5750\u6807\u8F74"),Hi.forEach(l),ji.forEach(l),Kn=E(s),w=F(s,"UL",{});var xa=n(w);j=F(xa,"LI",{});var ba=n(j);Zr=t(ba,"\u4F4D\u7F6E\uFF1A"),kF=F(ba,"CODE",{});var Ui=n(kF);gr=t(Ui,"axisLeft()"),Ui.forEach(l),sc=t(ba," \u548C "),SF=F(ba,"CODE",{});var Bi=n(SF);lc=t(Bi,"axisBottom()"),Bi.forEach(l),ac=t(ba,"\u3002"),ba.forEach(l),oc=E(xa),IF=F(xa,"LI",{});var Ti=n(IF);Fc=t(Ti,"g \u5143\u7D20\uFF0C g \u662F\u82F1\u6587\u4E2D\u7EC4\uFF08group\uFF09\u7684\u7F29\u5199\uFF0C\u5728\u6E32\u67D3\u65F6\uFF0C\u8F74\u53EA\u662F\u4E00\u6761\u76F4\u7EBF\u3002 \u56E0\u4E3A\u5B83\u662F\u4E00\u4E2A\u7B80\u5355\u7684\u56FE\u5F62\uFF0C\u6240\u4EE5\u53EF\u4EE5\u7528 g"),Ti.forEach(l),nc=E(xa),GF=F(xa,"LI",{});var Pi=n(GF);pc=t(Pi,"SVG \u652F\u6301\u591A\u79CD transforms\uFF0C\u4F46\u662F\u5B9A\u4F4D\u8F74\u9700\u8981\u4F7F\u7528 translate \u5C5E\u6027"),Pi.forEach(l),xa.forEach(l),Qn=E(s),ia=F(s,"P",{});var qi=n(ia);ec=t(qi,"\u4F8B\u5B50\uFF1A"),qi.forEach(l),Jn=E(s),VF=v(s,!1),OF=E(s),Qs=F(s,"H2",{id:!0});var Ri=n(Qs);Da=F(Ri,"A",{href:!0});var zi=n(Da);tc=t(zi,"\u5E38\u89C1\u56FE\u8868"),zi.forEach(l),Ri.forEach(l),Xn=E(s),Js=F(s,"H3",{id:!0});var Wi=n(Js);da=F(Wi,"A",{href:!0});var Mi=n(da);rc=t(Mi,"\u6563\u70B9\u56FE"),Mi.forEach(l),Wi.forEach(l),Yn=E(s),va=F(s,"BLOCKQUOTE",{});var $i=n(va);jF=F($i,"P",{});var Ni=n(jF);cc=t(Ni,"\u5706\u5708\u6765\u6620\u5C04\u6570\u636E\u70B9\uFF0C\u6BCF\u4E2A\u6570\u636E\u70B9\u6709\u4E24\u4E2A\u503C\u3002 \u8FD9\u4E24\u4E2A\u503C\u548C x \u548C y \u8F74\u76F8\u5173\u8054\uFF0C\u5728\u53EF\u89C6\u5316\u4E2D\u7528\u6765\u7ED9\u5706\u5708\u5B9A\u4F4D\u3002"),Ni.forEach(l),$i.forEach(l),Zn=E(s),HF=v(s,!1),UF=E(s),H=F(s,"DIV",{class:!0});var mp=n(H);Ec=F(mp,"HR",{}),yc=E(mp),BF=F(mp,"OL",{});var Ki=n(BF);Xs=F(Ki,"LI",{id:!0});var jc=n(Xs);ss=F(jc,"A",{href:!0,rel:!0,target:!0});var Qi=n(ss);ic=t(Qi,"\u6570\u636E\u53EF\u89C6\u5316 \u8BA4\u8BC1 | freeCodeCamp.org"),Qi.forEach(l),Ys=F(jc,"A",{href:!0,class:!0});var Ji=n(Ys);Dc=t(Ji,"\u21A9"),Ji.forEach(l),jc.forEach(l),Ki.forEach(l),mp.forEach(l),this.h()},h(){y(u,"href","https://chinese.freecodecamp.org/learn/data-visualization"),y(u,"rel","nofollow noopener noreferrer external"),y(u,"target","_blank"),y(Fs,"href","#fn-1"),y(Fs,"class","footnote-ref"),y(gs,"id","fnref-1"),y(sl,"href","#\u5B66\u4E60\u8D44\u6E90"),y(ns,"id","\u5B66\u4E60\u8D44\u6E90"),y(U,"href","https://d3js.org/"),y(U,"rel","nofollow noopener noreferrer external"),y(U,"target","_blank"),y(B,"href","https://www.youtube.com/watch?v=xkBheRZTkaw&t=1s"),y(B,"rel","nofollow noopener noreferrer external"),y(B,"target","_blank"),y(T,"href","https://vizhub.com/forum/t/get-it-right-in-black-white-index/110/2"),y(T,"rel","nofollow noopener noreferrer external"),y(T,"target","_blank"),y(P,"href","https://vizhub.com/blog/2021/02/20/new-livestream-series-get-it-right-in-black-and-white/"),y(P,"rel","nofollow noopener noreferrer external"),y(P,"target","_blank"),y(q,"href","https://vizhub.com/forum/t/get-it-right-in-black-white-index/110"),y(q,"rel","nofollow noopener noreferrer external"),y(q,"target","_blank"),y(R,"href","https://d3-graph-gallery.com/"),y(R,"rel","nofollow noopener noreferrer external"),y(R,"target","_blank"),y(z,"href","https://www.d3indepth.com/introduction/"),y(z,"rel","nofollow noopener noreferrer external"),y(z,"target","_blank"),y(W,"href","https://chinese.freecodecamp.org/learn/data-visualization/#data-visualization-with-d3"),y(W,"rel","nofollow noopener noreferrer external"),y(W,"target","_blank"),y(M,"href","https://wattenberger.com/blog/d3"),y(M,"rel","nofollow noopener noreferrer external"),y(M,"target","_blank"),y($,"href","https://github.com/xswei/d3js_doc"),y($,"rel","nofollow noopener noreferrer external"),y($,"target","_blank"),y(al,"href","#\u57FA\u7840\u64CD\u4F5C"),y(ps,"id","\u57FA\u7840\u64CD\u4F5C"),y(ol,"href","#\u4FEE\u6539\u5143\u7D20"),y(es,"id","\u4FEE\u6539\u5143\u7D20"),Qa.a=Ja,y(tl,"href","#\u4F7F\u7528\u6570\u636E"),y(ys,"id","\u4F7F\u7528\u6570\u636E"),y(N,"href","https://github.com/xswei/d3-selection/blob/master/README.md#selection_data"),y(N,"rel","nofollow noopener noreferrer external"),y(N,"target","_blank"),ao.a=oo,y(il,"href","#\u4F7F\u7528\u52A8\u6001\u6570\u636E"),y(vs,"id","\u4F7F\u7528\u52A8\u6001\u6570\u636E"),no.a=po,y(fl,"href","#\u7ED9\u5143\u7D20\u6DFB\u52A0\u5185\u8054\u6837\u5F0F"),y(fs,"id","\u7ED9\u5143\u7D20\u6DFB\u52A0\u5185\u8054\u6837\u5F0F"),co.a=Eo,y(Cl,"href","#\u6DFB\u52A0-class"),y(As,"id","\u6DFB\u52A0-class"),uo.a=Ao,y(Ll,"href","#\u6807\u7B7E"),y(hs,"id","\u6807\u7B7E"),mo.a=Lo,y(kl,"href","#\u6DFB\u52A0\u5DE5\u5177\u63D0\u793A-tooltip"),y(Ls,"id","\u6DFB\u52A0\u5DE5\u5177\u63D0\u793A-tooltip"),wo.a=ko,y(Gl,"href","#svg"),y(xs,"id","svg"),y(Ol,"href","#\u521B\u5EFA-svg"),y(bs,"id","\u521B\u5EFA-svg"),Io.a=Go,y(jl,"href","#\u53CD\u8F6C-svg-\u5143\u7D20"),y(ws,"id","\u53CD\u8F6C-svg-\u5143\u7D20"),y(Tl,"href","#\u66F4\u6539-svg-\u5143\u7D20\u7684\u989C\u8272"),y(Is,"id","\u66F4\u6539-svg-\u5143\u7D20\u7684\u989C\u8272"),Bo.a=To,y(ql,"href","#svg-\u56FE\u5F62"),y(Vs,"id","svg-\u56FE\u5F62"),y(zl,"href","#\u77E9\u5F62"),y(Os,"id","\u77E9\u5F62"),qo.a=Ro,y(Ml,"href","#\u5706\u5F62"),y(js,"id","\u5706\u5F62"),No.a=Ko,y(Nl,"href","#\u6BD4\u4F8B\u5C3A"),y(Us,"id","\u6BD4\u4F8B\u5C3A"),y(Kl,"href","#\u521B\u5EFA\u7EBF\u6027\u6BD4\u4F8B"),y(Bs,"id","\u521B\u5EFA\u7EBF\u6027\u6BD4\u4F8B"),y(Xl,"href","#\u7EBF\u6027\u7F29\u653E"),y(Ts,"id","\u7EBF\u6027\u7F29\u653E"),Zo.a=go,sF.a=lF,y(Zl,"href","#\u6309\u6BD4\u4F8B\u8BBE\u7F6E\u57DF\u548C\u8303\u56F4"),y(Ps,"id","\u6309\u6BD4\u4F8B\u8BBE\u7F6E\u57DF\u548C\u8303\u56F4"),tF.a=rF,y(na,"href","#\u6700\u5C0F\u503C\u6700\u5927\u503C"),y(Ws,"id","\u6700\u5C0F\u503C\u6700\u5927\u503C"),vF.a=fF,y(ra,"href","#\u4F7F\u7528\u52A8\u6001\u6BD4\u4F8B"),y(Ms,"id","\u4F7F\u7528\u52A8\u6001\u6BD4\u4F8B"),hF.a=mF,y(Ea,"href","#\u4F7F\u7528\u9884\u5B9A\u4E49\u7684\u6BD4\u4F8B\u653E\u7F6E\u5143\u7D20"),y($s,"id","\u4F7F\u7528\u9884\u5B9A\u4E49\u7684\u6BD4\u4F8B\u653E\u7F6E\u5143\u7D20"),bF.a=wF,y(ya,"href","#\u6DFB\u52A0\u5750\u6807\u8F74"),y(Ks,"id","\u6DFB\u52A0\u5750\u6807\u8F74"),VF.a=OF,y(Da,"href","#\u5E38\u89C1\u56FE\u8868"),y(Qs,"id","\u5E38\u89C1\u56FE\u8868"),y(da,"href","#\u6563\u70B9\u56FE"),y(Js,"id","\u6563\u70B9\u56FE"),HF.a=UF,y(ss,"href","https://chinese.freecodecamp.org/learn/data-visualization/"),y(ss,"rel","nofollow noopener noreferrer external"),y(ss,"target","_blank"),y(Ys,"href","#fnref-1"),y(Ys,"class","footnote-backref"),y(Xs,"id","fn-1"),y(H,"class","footnotes")},m(s,p){r(s,i,p),a(i,m),a(i,u),a(u,os),r(s,D,p),r(s,A,p),a(A,k),a(k,Lp),a(k,gs),a(gs,Fs),a(Fs,xp),r(s,qF,p),r(s,ns,p),a(ns,sl),a(sl,bp),r(s,RF,p),r(s,f,p),a(f,wa),a(wa,U),a(U,wp),a(f,kp),a(f,ll),a(ll,B),a(B,Sp),a(ll,S),a(S,ka),a(ka,T),a(T,Ip),a(S,Gp),a(S,Sa),a(Sa,P),a(P,Vp),a(S,Op),a(S,Ia),a(Ia,q),a(q,jp),a(f,Hp),a(f,Ga),a(Ga,R),a(R,Up),a(f,Bp),a(f,Va),a(Va,z),a(z,Tp),a(f,Pp),a(f,Oa),a(Oa,W),a(W,qp),a(f,Rp),a(f,ja),a(ja,M),a(M,zp),a(f,Wp),a(f,Ha),a(Ha,$),a($,Mp),r(s,zF,p),r(s,ps,p),a(ps,al),a(al,$p),r(s,WF,p),r(s,es,p),a(es,ol),a(ol,Np),r(s,MF,p),r(s,_,p),a(_,ts),a(ts,Ua),a(Ua,Kp),a(ts,Qp),a(ts,rs),a(rs,Ba),a(Ba,Jp),a(rs,Xp),a(rs,Ta),a(Ta,Yp),a(_,Zp),a(_,Fl),a(Fl,Pa),a(Pa,gp),a(Fl,qa),a(qa,Ra),a(Ra,se),a(_,le),a(_,nl),a(nl,za),a(za,ae),a(nl,cs),a(cs,Wa),a(Wa,oe),a(cs,Fe),a(cs,Ma),a(Ma,ne),a(_,pe),a(_,pl),a(pl,$a),a($a,ee),a(pl,Es),a(Es,Na),a(Na,te),a(Es,re),a(Es,Ka),a(Ka,ce),r(s,$F,p),Qa.m(gi,s,p),r(s,Ja,p),r(s,el,p),a(el,Ee),r(s,NF,p),r(s,ys,p),a(ys,tl),a(tl,ye),r(s,KF,p),r(s,rl,p),a(rl,N),a(N,ie),r(s,QF,p),r(s,K,p),a(K,is),a(is,Xa),a(Xa,De),a(is,de),a(is,I),a(I,Ya),a(Ya,ve),a(I,fe),a(I,Za),a(Za,ue),a(I,Ae),a(I,Ds),a(Ds,Ce),a(Ds,ga),a(ga,_e),a(Ds,he),a(K,me),a(K,cl),a(cl,so),a(so,Le),a(cl,xe),r(s,JF,p),r(s,El,p),a(El,ds),a(ds,be),a(ds,lo),a(lo,we),a(ds,ke),r(s,XF,p),r(s,yl,p),a(yl,Se),r(s,YF,p),ao.m(sD,s,p),r(s,oo,p),r(s,vs,p),a(vs,il),a(il,Ie),r(s,ZF,p),r(s,Dl,p),a(Dl,Ge),r(s,gF,p),r(s,dl,p),a(dl,vl),a(vl,Fo),a(Fo,Ve),a(vl,Oe),r(s,sn,p),no.m(lD,s,p),r(s,po,p),r(s,fs,p),a(fs,fl),a(fl,je),r(s,ln,p),r(s,ul,p),a(ul,Al),a(Al,eo),a(eo,He),a(Al,us),a(us,to),a(to,Ue),a(us,Be),a(us,ro),a(ro,Te),r(s,an,p),co.m(aD,s,p),r(s,Eo,p),r(s,As,p),a(As,Cl),a(Cl,Pe),r(s,on,p),r(s,_l,p),a(_l,hl),a(hl,yo),a(yo,qe),a(hl,G),a(G,io),a(io,Re),a(G,ze),a(G,ml),a(ml,We),a(ml,Cs),a(Cs,Do),a(Do,Me),a(Cs,$e),a(Cs,_s),a(_s,Ne),a(_s,vo),a(vo,Ke),a(_s,Qe),a(G,Je),a(G,fo),a(fo,Xe),r(s,Fn,p),uo.m(oD,s,p),r(s,Ao,p),r(s,hs,p),a(hs,Ll),a(Ll,Ye),r(s,nn,p),r(s,Q,p),a(Q,Co),a(Co,Ze),a(Q,ge),a(Q,xl),a(xl,st),a(xl,ms),a(ms,bl),a(bl,_o),a(_o,lt),a(bl,at),a(ms,ot),a(ms,wl),a(wl,ho),a(ho,Ft),a(wl,nt),r(s,pn,p),mo.m(FD,s,p),r(s,Lo,p),r(s,Ls,p),a(Ls,kl),a(kl,pt),r(s,en,p),r(s,Sl,p),a(Sl,xo),a(xo,et),r(s,tn,p),r(s,Il,p),a(Il,bo),a(bo,tt),r(s,rn,p),wo.m(nD,s,p),r(s,ko,p),r(s,xs,p),a(xs,Gl),a(Gl,rt),r(s,cn,p),r(s,Vl,p),a(Vl,So),a(So,ct),r(s,En,p),r(s,bs,p),a(bs,Ol),a(Ol,Et),r(s,yn,p),Io.m(pD,s,p),r(s,Go,p),r(s,ws,p),a(ws,jl),a(jl,yt),r(s,Dn,p),r(s,Hl,p),a(Hl,Vo),a(Vo,it),r(s,dn,p),r(s,Ul,p),a(Ul,Oo),a(Oo,Dt),r(s,vn,p),r(s,Bl,p),a(Bl,dt),r(s,fn,p),r(s,J,p),a(J,ks),a(ks,vt),a(ks,jo),a(jo,ft),a(ks,ut),a(J,At),a(J,Ss),a(Ss,Ct),a(Ss,Ho),a(Ho,_t),a(Ss,ht),r(s,un,p),r(s,Is,p),a(Is,Tl),a(Tl,mt),r(s,An,p),r(s,Pl,p),a(Pl,Gs),a(Gs,Lt),a(Gs,Uo),a(Uo,xt),a(Gs,bt),r(s,Cn,p),Bo.m(eD,s,p),r(s,To,p),r(s,Vs,p),a(Vs,ql),a(ql,wt),r(s,_n,p),r(s,Rl,p),a(Rl,Po),a(Po,kt),r(s,hn,p),r(s,Os,p),a(Os,zl),a(zl,St),r(s,mn,p),r(s,Wl,p),a(Wl,It),r(s,Ln,p),qo.m(tD,s,p),r(s,Ro,p),r(s,js,p),a(js,Ml),a(Ml,Gt),r(s,xn,p),r(s,L,p),a(L,zo),a(zo,Vt),a(L,Ot),a(L,$l),a($l,jt),a($l,Hs),a(Hs,Wo),a(Wo,Ht),a(Hs,Ut),a(Hs,Mo),a(Mo,Bt),a(L,Tt),a(L,$o),a($o,Pt),r(s,bn,p),No.m(rD,s,p),r(s,Ko,p),r(s,Us,p),a(Us,Nl),a(Nl,qt),r(s,wn,p),r(s,Bs,p),a(Bs,Kl),a(Kl,Rt),r(s,kn,p),r(s,Ql,p),a(Ql,Qo),a(Qo,zt),r(s,Sn,p),r(s,Jl,p),a(Jl,Jo),a(Jo,Wt),r(s,In,p),r(s,Ts,p),a(Ts,Xl),a(Xl,Mt),r(s,Gn,p),r(s,X,p),a(X,Xo),a(Xo,$t),a(X,Nt),a(X,Yo),a(Yo,Kt),r(s,Vn,p),Zo.m(cD,s,p),r(s,go,p),r(s,Yl,p),a(Yl,Qt),r(s,On,p),sF.m(ED,s,p),r(s,lF,p),r(s,Ps,p),a(Ps,Zl),a(Zl,Jt),r(s,jn,p),r(s,x,p),a(x,qs),a(qs,Xt),a(qs,aF),a(aF,Yt),a(qs,Zt),a(x,gt),a(x,Rs),a(Rs,sr),a(Rs,oF),a(oF,lr),a(Rs,ar),a(x,or),a(x,V),a(V,FF),a(FF,Fr),a(V,nr),a(V,nF),a(nF,pr),a(V,er),a(V,zs),a(zs,gl),a(gl,pF),a(pF,tr),a(gl,rr),a(zs,cr),a(zs,sa),a(sa,eF),a(eF,Er),a(sa,yr),r(s,Hn,p),r(s,la,p),a(la,ir),r(s,Un,p),tF.m(yD,s,p),r(s,rF,p),r(s,aa,p),a(aa,Dr),r(s,Bn,p),r(s,oa,p),a(oa,dr),r(s,Tn,p),r(s,Fa,p),a(Fa,vr),r(s,Pn,p),r(s,Ws,p),a(Ws,na),a(na,fr),r(s,qn,p),r(s,h,p),a(h,pa),a(pa,cF),a(cF,ur),a(pa,Ar),a(h,Cr),a(h,ea),a(ea,EF),a(EF,_r),a(ea,hr),a(h,mr),a(h,Y),a(Y,yF),a(yF,Lr),a(Y,xr),a(Y,iF),a(iF,br),a(Y,wr),a(h,kr),a(h,Z),a(Z,DF),a(DF,Sr),a(Z,Ir),a(Z,dF),a(dF,Gr),a(Z,Vr),r(s,Rn,p),r(s,ta,p),a(ta,Or),r(s,zn,p),vF.m(iD,s,p),r(s,fF,p),r(s,Ms,p),a(Ms,ra),a(ra,jr),r(s,Wn,p),r(s,b,p),a(b,O),a(O,Hr),a(O,uF),a(uF,Ur),a(O,Br),a(O,AF),a(AF,Tr),a(O,Pr),a(b,qr),a(b,ca),a(ca,CF),a(CF,Rr),a(ca,zr),a(b,Wr),a(b,_F),a(_F,Mr),r(s,Mn,p),hF.m(DD,s,p),r(s,mF,p),r(s,$s,p),a($s,Ea),a(Ea,$r),r(s,$n,p),r(s,g,p),a(g,LF),a(LF,Nr),a(g,Kr),a(g,Ns),a(Ns,Qr),a(Ns,xF),a(xF,Jr),a(Ns,Xr),r(s,Nn,p),bF.m(dD,s,p),r(s,wF,p),r(s,Ks,p),a(Ks,ya),a(ya,Yr),r(s,Kn,p),r(s,w,p),a(w,j),a(j,Zr),a(j,kF),a(kF,gr),a(j,sc),a(j,SF),a(SF,lc),a(j,ac),a(w,oc),a(w,IF),a(IF,Fc),a(w,nc),a(w,GF),a(GF,pc),r(s,Qn,p),r(s,ia,p),a(ia,ec),r(s,Jn,p),VF.m(vD,s,p),r(s,OF,p),r(s,Qs,p),a(Qs,Da),a(Da,tc),r(s,Xn,p),r(s,Js,p),a(Js,da),a(da,rc),r(s,Yn,p),r(s,va,p),a(va,jF),a(jF,cc),r(s,Zn,p),HF.m(fD,s,p),r(s,UF,p),r(s,H,p),a(H,Ec),a(H,yc),a(H,BF),a(BF,Xs),a(Xs,ss),a(ss,ic),a(Xs,Ys),a(Ys,Dc)},p:kD,d(s){s&&l(i),s&&l(D),s&&l(A),s&&l(qF),s&&l(ns),s&&l(RF),s&&l(f),s&&l(zF),s&&l(ps),s&&l(WF),s&&l(es),s&&l(MF),s&&l(_),s&&l($F),s&&Qa.d(),s&&l(Ja),s&&l(el),s&&l(NF),s&&l(ys),s&&l(KF),s&&l(rl),s&&l(QF),s&&l(K),s&&l(JF),s&&l(El),s&&l(XF),s&&l(yl),s&&l(YF),s&&ao.d(),s&&l(oo),s&&l(vs),s&&l(ZF),s&&l(Dl),s&&l(gF),s&&l(dl),s&&l(sn),s&&no.d(),s&&l(po),s&&l(fs),s&&l(ln),s&&l(ul),s&&l(an),s&&co.d(),s&&l(Eo),s&&l(As),s&&l(on),s&&l(_l),s&&l(Fn),s&&uo.d(),s&&l(Ao),s&&l(hs),s&&l(nn),s&&l(Q),s&&l(pn),s&&mo.d(),s&&l(Lo),s&&l(Ls),s&&l(en),s&&l(Sl),s&&l(tn),s&&l(Il),s&&l(rn),s&&wo.d(),s&&l(ko),s&&l(xs),s&&l(cn),s&&l(Vl),s&&l(En),s&&l(bs),s&&l(yn),s&&Io.d(),s&&l(Go),s&&l(ws),s&&l(Dn),s&&l(Hl),s&&l(dn),s&&l(Ul),s&&l(vn),s&&l(Bl),s&&l(fn),s&&l(J),s&&l(un),s&&l(Is),s&&l(An),s&&l(Pl),s&&l(Cn),s&&Bo.d(),s&&l(To),s&&l(Vs),s&&l(_n),s&&l(Rl),s&&l(hn),s&&l(Os),s&&l(mn),s&&l(Wl),s&&l(Ln),s&&qo.d(),s&&l(Ro),s&&l(js),s&&l(xn),s&&l(L),s&&l(bn),s&&No.d(),s&&l(Ko),s&&l(Us),s&&l(wn),s&&l(Bs),s&&l(kn),s&&l(Ql),s&&l(Sn),s&&l(Jl),s&&l(In),s&&l(Ts),s&&l(Gn),s&&l(X),s&&l(Vn),s&&Zo.d(),s&&l(go),s&&l(Yl),s&&l(On),s&&sF.d(),s&&l(lF),s&&l(Ps),s&&l(jn),s&&l(x),s&&l(Hn),s&&l(la),s&&l(Un),s&&tF.d(),s&&l(rF),s&&l(aa),s&&l(Bn),s&&l(oa),s&&l(Tn),s&&l(Fa),s&&l(Pn),s&&l(Ws),s&&l(qn),s&&l(h),s&&l(Rn),s&&l(ta),s&&l(zn),s&&vF.d(),s&&l(fF),s&&l(Ms),s&&l(Wn),s&&l(b),s&&l(Mn),s&&hF.d(),s&&l(mF),s&&l($s),s&&l($n),s&&l(g),s&&l(Nn),s&&bF.d(),s&&l(wF),s&&l(Ks),s&&l(Kn),s&&l(w),s&&l(Qn),s&&l(ia),s&&l(Jn),s&&VF.d(),s&&l(OF),s&&l(Qs),s&&l(Xn),s&&l(Js),s&&l(Yn),s&&l(va),s&&l(Zn),s&&HF.d(),s&&l(UF),s&&l(H)}}}function GD(Zs){let i,m;const u=[Zs[0],Zi];let os={$$slots:{default:[ID]},$$scope:{ctx:Zs}};for(let D=0;D<u.length;D+=1)os=Hc(os,u[D]);return i=new SD({props:os}),{c(){_D(i.$$.fragment)},l(D){hD(i.$$.fragment,D)},m(D,A){mD(i,D,A),m=!0},p(D,[A]){const k=A&1?LD(u,[A&1&&Xi(D[0]),A&0&&Xi(Zi)]):{};A&2&&(k.$$scope={dirty:A,ctx:D}),i.$set(k)},i(D){m||(xD(i.$$.fragment,D),m=!0)},o(D){bD(i.$$.fragment,D),m=!1},d(D){wD(i,D)}}}const Zi={title:"D3.js \u57FA\u7840\u7B14\u8BB0",created:"2022-07-23T00:00:00.000Z",summary:"\u5373\u4F7F\u662FFreeCodeCamp\u4E5F\u8981\u505A\u7B14\u8BB0",tags:["D3.js","\u6570\u636E\u53EF\u89C6\u5316"],slug:"/2022-07-23-d3.md",path:"/2022-07-23-d3",toc:[{depth:2,title:"\u5B66\u4E60\u8D44\u6E90",slug:"\u5B66\u4E60\u8D44\u6E90"},{depth:2,title:"\u57FA\u7840\u64CD\u4F5C",slug:"\u57FA\u7840\u64CD\u4F5C"},{depth:3,title:"\u4FEE\u6539\u5143\u7D20",slug:"\u4FEE\u6539\u5143\u7D20"},{depth:3,title:"\u4F7F\u7528\u6570\u636E",slug:"\u4F7F\u7528\u6570\u636E"},{depth:3,title:"\u4F7F\u7528\u52A8\u6001\u6570\u636E",slug:"\u4F7F\u7528\u52A8\u6001\u6570\u636E"},{depth:3,title:"\u7ED9\u5143\u7D20\u6DFB\u52A0\u5185\u8054\u6837\u5F0F",slug:"\u7ED9\u5143\u7D20\u6DFB\u52A0\u5185\u8054\u6837\u5F0F"},{depth:3,title:"\u6DFB\u52A0 Class",slug:"\u6DFB\u52A0-class"},{depth:3,title:"\u6807\u7B7E",slug:"\u6807\u7B7E"},{depth:3,title:"\u6DFB\u52A0\u5DE5\u5177\u63D0\u793A tooltip",slug:"\u6DFB\u52A0\u5DE5\u5177\u63D0\u793A-tooltip"},{depth:2,title:"SVG",slug:"svg"},{depth:3,title:"\u521B\u5EFA SVG",slug:"\u521B\u5EFA-svg"},{depth:3,title:"\u53CD\u8F6C SVG \u5143\u7D20",slug:"\u53CD\u8F6C-svg-\u5143\u7D20"},{depth:3,title:"\u66F4\u6539 SVG \u5143\u7D20\u7684\u989C\u8272",slug:"\u66F4\u6539-svg-\u5143\u7D20\u7684\u989C\u8272"},{depth:3,title:"SVG \u56FE\u5F62",slug:"svg-\u56FE\u5F62"},{depth:4,title:"\u77E9\u5F62",slug:"\u77E9\u5F62"},{depth:4,title:"\u5706\u5F62",slug:"\u5706\u5F62"},{depth:2,title:"\u6BD4\u4F8B\u5C3A",slug:"\u6BD4\u4F8B\u5C3A"},{depth:3,title:"\u521B\u5EFA\u7EBF\u6027\u6BD4\u4F8B",slug:"\u521B\u5EFA\u7EBF\u6027\u6BD4\u4F8B"},{depth:4,title:"\u7EBF\u6027\u7F29\u653E",slug:"\u7EBF\u6027\u7F29\u653E"},{depth:4,title:"\u6309\u6BD4\u4F8B\u8BBE\u7F6E\u57DF\u548C\u8303\u56F4",slug:"\u6309\u6BD4\u4F8B\u8BBE\u7F6E\u57DF\u548C\u8303\u56F4"},{depth:4,title:"\u6700\u5C0F\u503C\u6700\u5927\u503C",slug:"\u6700\u5C0F\u503C\u6700\u5927\u503C"},{depth:3,title:"\u4F7F\u7528\u52A8\u6001\u6BD4\u4F8B",slug:"\u4F7F\u7528\u52A8\u6001\u6BD4\u4F8B"},{depth:3,title:"\u4F7F\u7528\u9884\u5B9A\u4E49\u7684\u6BD4\u4F8B\u653E\u7F6E\u5143\u7D20",slug:"\u4F7F\u7528\u9884\u5B9A\u4E49\u7684\u6BD4\u4F8B\u653E\u7F6E\u5143\u7D20"},{depth:3,title:"\u6DFB\u52A0\u5750\u6807\u8F74",slug:"\u6DFB\u52A0\u5750\u6807\u8F74"},{depth:2,title:"\u5E38\u89C1\u56FE\u8868",slug:"\u5E38\u89C1\u56FE\u8868"},{depth:3,title:"\u6563\u70B9\u56FE",slug:"\u6563\u70B9\u56FE"}],updated:"2022-08-01T03:03:33.463Z"};function VD(Zs,i,m){return Zs.$$set=u=>{m(0,i=Hc(Hc({},i),Yi(u)))},i=Yi(i),[i]}class WD extends uD{constructor(i){super(),AD(this,i,VD,GD,CD,{})}}export{WD as default,Zi as metadata};