シンプルな円グラフの統計を行いますD3-

D3jsは何ですか

D3js これは、文書のデータ操作に基づいている JavaScript ライブラリ。あなたが使用するのに役立つことができ HTML、 CSS、 SVG および Canvas データを表示します。D3 従来のフォロー Web ドライブに強力なビジュアルコンポーネントを組み合わせた近代的なブラウザでは、他のフレームせずに独立して動作することができ、基準を DOM 操作。（D3は、公式文書から取らhttps://www.d3js.org.cn/）

私たちは、円グラフの統計をしなければならないのでそれでは、それを格納する配列を使用し、いくつかの生データ、シンプルな言葉を準備しましょう

//トラフィックデータの予約
データリスト：[ 
        {bookname： '40歳までの改革開放'、clickCountは：3345}、
        {bookname '30年の日本におけるロスト、clickCountは：2345}、
        {bookname :.'説明およびD3使用'clickCountは：2346}、
        {bookname：'秘密VUE 'clickCountは：753}、
        {bookname：' JS Definitive Guideの'clickCountは：456}、
        {bookname：'シンプルなプログラミング」、clickCountは：763}、
        {bookname ： '未知ブック'、clickCountは：5673} 
      ]

　　SVGチャートはdiv要素の定義の後にページを置く、我々は店に使用しました

<Pスロット= "タイトル"> D3简单饼图</ P> 
        <DIV CLASS = "simplepiebook"> 
        </ div>

D3は、我々はdiv要素を挿入する必要がありますSVG DOM API操作のビューを提供します

チャート= LET（ 'simplepiebook'）をd3.select。アペンド（ 'SVG'）// SELECT要素選択され 
      .ATTR（ '幅'、600 ）
      （.ATTR '高'、400）// SVG幅と高さキャンバスサイズ

その後、我々は、絵は図SVGデータにパイすることができた後、この方法はほぼ同じで、あまりにもDOMを持っているのでという、層をラップするために、SVG。図のようにg要素を追加したオフセットXY軸に与えることを変換します

聞かせグラム= chart.append（ 'G' ）.ATTR（
       '変換' 、
       '変換（' 300 '' 200 '）' 
    ）

D3は、セクタ内の円グラフを生成するために使用される発電機をd3.arc（https://www.d3js.org.cn/document/d3-shape/#arcs）

// 単一円弧定義
    本 .ARC = D3 
      .ARC（）// 定義する単一の円弧 
      （0 .innerRadius ）//セクタフィレット

D3の利用パイ方法は、ソートあなたが合格しない場合に注意を払う必要があります---円グラフを生成し、その後、彼は彼自身の並べ替えを持っていますが、任意の並べ替えに渡された場合はnullではありません

//は、パイを定義 
    LETのd3.pie PIE =（）。ソート（ヌル）.Valueの（関数（D）{
       戻りd.clickcount 
    }）

その後、我々は、最後のステップを完了円リングを描き、円グラフは基本的に未完成である、一般的に持っています

D3のSelectAllデータの主な用途は、3つのAPIを入力してください

SelectAll（）は入力データのすべての要素を選択することであるデータなどのデータが、塗装されたパイは、パイ（データリスト）、我々は選択初期でもあるので、ほとんど役に立たない結合方法に使用される対応する要素を入力しています要素を生成しません

g.selectAll（」アーク'）// 画环图 
      .DATA（パイ（この.datalist））
      .enter（）
      .append（ 'パス' ）
      .ATTR（ 'カーソル'、 'ポインタ' ）
      .ATTR（ 'クラス、 'アーク' ）
      .ATTR（ 'ストローク'、関数（D）{
         リターン '＃333333' 
      }）
      .style（ 'フィル'、関数（D）{
         リターン '＃98abc5' 
      }） 
      。各（ 関数（D）{
         // 現在の角度の開始と終了を格納し、に等しくされる 
        TEM =せ {
          D ...、endAngle：d.startAngle 
        } 
        d.outerRadius = RADIUS - 10
         この ._currentData = TEM 
      }）
      // 各セグメントのアニメーション、持続時間は、イベントを生成するために必要表す
      .transition（）
      .duration（ 100 ）
       // 遅延の遅延実行表し 
      .delay（関数（D、I）を{
         戻り I 100 * 
      }）
      .attrTween（ 'D'、関数（次へ）{
         // 動的アニメーションプロパティがD提供
        VAR Iはd3.interpolate（= これを。 _currentData、次）
         この._currentData = I（0）// 重设当前角度
        リターン 機能（T）{
           戻り_self.arc（I（T））
        } 
      }）

    関数arcTween（outerRadius、遅延）{ 
      _selfはせ = この
      // 设置缓动函数
      戻り 関数（）{ 
        d3.select（本）
          .transition（）
          .delay（遅延）
          .attrTween（ 'D'、関数（D）{
             VAR I = d3.interpolate（d.outerRadius、outerRadius）
             リターン 機能（T） {
              d.outerRadius = I（t）は
               戻り_self.arc（D）
            } 
          }）
      } 
    }

これは、実質的には、各設定をしたい場合は円グラフは、実質的に、同じ色ではありません描画することが可能となり、あなたは色の配列を定義することができ、カラー塗装からライン上の画像の配列を取得します

私達はちょうどライン上での標準的なデータの両方を引き継ぐ必要があります

piedata =パイ（this.datalist）//が、これは我々が水の泡図テキストによるテキストに上に行く、このデータに基づいて、処理後の無駄図のpiedataデータへのプロセスデータに必要なことであるしましょう

（ 'G'）ラベル= g.appendをしましょう

= percentLabelArcせD3 
      .ARC（）// パーセント内の単一円弧テキスト定義 
      .outerRadius（RADIUS - 60 ）
      .innerRadius（RADIUS - 60 ）

    LETラベル = g.append（ 'G' ）

    arcs.forEach（関数（D ）{
       // 出力テキストパーセント 
      CONST = C percentLabelArc.centroid（D）
      ラベル
        .append（ 'テキスト' ）
        .ATTR（ 'クラス'、 '年齢テキスト' ）
        .ATTR（ '塗りつぶし'、 '＃1 cddc39' ）
        。 ATTR（ 'フォント重量'、 '700' ）
        。ATTR（'フォントサイズ'、 '12ピクセル' ）
        .ATTR（ 'テキスト・アンカー'、 '中央' ）
        .ATTR（ 'x'は、C [0 ]）
        .ATTR（ 'Y'、C [1 ]）
        の.text（ d.data.bookname + '点击量：' + d.data.clickcount）
    }）

基本的には未完成の缶は、一般的に円グラフを見て、だけでなく、情報を提示します

もちろん、あなたもより美しく、我々はまた、マウスオーバー、マウスアウトマウスイベントの数を増やすことができことができます。

D3のAPI漢で使用されるもののいくつかを要約します

　　1.d3.selectAll 2.d3.enterが選択要素は、データを結合する方法で使用されるデータのデータ値よりも小さい任意の要素

　　3.pie（データリスト）の基本的な方法は、円グラフの角度スパンが4.d3.arcビデオを提供し、最初の角を含むいくつかのデータが必要円グラフ、にデータを処理します

シンプルな円グラフの統計を行いますD3-

D3jsは何ですか

おすすめ