[d3pie.js]円グラフを書こう

# d3pieで円グラフを書きます
円グラフ javascriptで調べてたらいろいろなライブラリが見つかったので、その中の一つ「d3pie」で円グラフを書こうと思います。

# d3.jsとは？
[公式ページ](https://d3js.org/)。Data-Driven Documents の略。Dが3つあるからd3ですね。
データからSVGを描画してくれるライブラリです。

# d3pie.jsとは？
[公式ページ](http://d3pie.org/)。d3.jsをもとにした、円グラフを描画するライブラリのようです。便利そうだけどQiitaであんまり見かけなかったので今回記事にしてみました。
バージョンが3~4年前から更新されてないのでもしかしたらメジャーじゃないのかも・・・。

# 書きます

``` html:html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  <!-- グラフ表示 -->
  <div id="myChart"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.3.1/d3.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/d3pie@0.2.1/d3pie/d3pie.min.js"></script>
  <script>
    var pie = new d3pie("myChart", {
      data: {
        content: [
          { label: "国語", value: 70 },
          { label: "英語", value: 80 },
          { label: "社会", value: 60 },
          { label: "理科", value: 40 },
          { label: "数学", value: 100 },
        ],
      },
    });
  </script>
</body>

</html>
```

出来たグラフはこんな感じです。↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504218/e41742a8-46ac-3ed9-c9b8-08a031b87beb.png)

デフォルトでグラフのまわりに凡例書いてくれたりして、なかなか見やすいですね。
良くある、円グラフの上に凡例があるの見にくいよ＞＜って人にはおすすめかもしれません。

# 細かい設定も出来ます。
`<script>`タグのこの部分、設定が細かく出来たりするので見てみましょう。

``` javascript
    var pie = new d3pie("myChart", {
      data: {
        content: [
          { label: "国語", value: 70 },
          { label: "英語", value: 80 },
          { label: "社会", value: 60 },
          { label: "理科", value: 40 },
          { label: "数学", value: 100 },
        ],
      },
    });
```
まずはヘッダーを追加してみたり

``` javascript
    var pie = new d3pie("myChart", {
      "header": {
        "title": {
          "text": "期末試験の結果",
          "fontSize": 20,
          "font": "Meiryo UI"
        },
        "subtitle": {
          "text": "2021-01-25",
          "color": "#999999",
          "fontSize": 13,
          "font": "Meiryo UI"
        },
        "titleSubtitlePadding": 9
      },
      data: {
        content: [
          { label: "国語", value: 70 },
          { label: "英語", value: 80 },
          { label: "社会", value: 60 },
          { label: "理科", value: 40 },
          { label: "数学", value: 100 },
        ],
      },
    });
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504218/04e3f12f-bbe6-e2a0-1820-9fef1353855f.png)

また、footerを追加してみたり。

``` javascript
    var pie = new d3pie("myChart", {
      "header": {
        "title": {
          "text": "期末試験の結果",
          "fontSize": 20,
          "font": "Meiryo UI"
        },
        "subtitle": {
          "text": "2021-01-25",
          "color": "#999999",
          "fontSize": 13,
          "font": "Meiryo UI"
        },
        "titleSubtitlePadding": 9
      },
      "footer": {
        "text": "図10-1.○○",
        "color": "#999999",
        "fontSize": 18,
        "font": "open sans",
        "location": "bottom-center"
      },
      data: {
        content: [
          { label: "国語", value: 70 },
          { label: "英語", value: 80 },
          { label: "社会", value: 60 },
          { label: "理科", value: 40 },
          { label: "数学", value: 100 },
        ],
      },
    });

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504218/10222d5f-e596-1be0-0247-dd3c35378983.png)

ほかにも、凡例のところをグラフからどれくらい離すか、またテキストの大きさはどうするか、などの設定が変えられそうでした。円グラフの表示順とかもソートが出来そうです。
試しながらいろいろ使ってみようと思います。