まくろぐ
更新:
作成:

D3.js を使って円グラフを描画するには、d3.pie()d3.arc() を組み合わせて使用します。

d3.pie() 関数で扇形の角度を計算する

D3.js の d3.pie() 関数を使うと、円グラフ (pie chart) やドーナツチャート (donut chart) を描画するための角度を計算する関数オブジェクトを生成できます。 生成した関数にデータ配列を渡すと、各データに対応する扇形部分の開始角度 (startAngle) と終了角度 (endAngle) を計算してくれます。 角度はラジアンで表現されるので、180° は 3.1415 になります。

const data = [5, 3, 2]
const pie = d3.pie()    // pie 関数の生成
const arcs = pie(data)  // データ配列から角度情報を求める

console.log(args);
[
  {
    "data": 5, "index": 0, "value": 5, "startAngle": 0,
    "endAngle": 3.141592653589793, "padAngle": 0
  },
  {
    "data": 3, "index": 1, "value": 3, "startAngle": 3.141592653589793,
    "endAngle": 5.026548245743669, "padAngle": 0
  },
  {
    "data": 2, "index": 2, "value": 2, "startAngle": 5.026548245743669,
    "endAngle": 6.283185307179586, "padAngle": 0
  }
]

d3.arc() 関数で SVG の path 情報に変換する

SVG にはネイティブで円グラフを描画するための要素は存在しないので、扇形の図形などを表現するための path 要素を作成しなければいけません。 D3.js の d3.arc() 関数を使用すると、扇形用の path 要素の d 属性の値を求めるための関数 (arc ジェネレーター) を生成できます。 生成した関数には、各扇形の開始角度 (startAngle) と終了角度 (endAngle) を渡します。

arc ジェネレーターで扇形用のパス情報を取得する
// 内側の半径 (innerRadius) を 0 より大きくするとドーナツチャートになる
const arc = d3.arc().innerRadius(0).outerRadius(100)

// path 要素の d 属性用の値を求める
console.log(arc({ startAngle: 0, endAngle: 3.1415 }))
console.log(arc({ startAngle: 3.1415, endAngle: 5.0265 }))
console.log(arc({ startAngle: 5.0265, endAngle: 6.2831 }))
実行結果
M0,-100A100,100,0,0,1,0.009,100L0,0Z
M0.009,100A100,100,0,0,1,-95.107,-30.897L0,0Z
M-95.107,-30.897A100,100,0,0,1,-0.009,-100L0,0Z

d3.pie() と d3.arc() を組み合わせて円グラフを描画する

図: d3.pie() と d3.arc() による円グラフの描画

上記で説明した関数を利用すれば、次のような手順でデータ配列を円グラフとして描画できます。

  1. d3.pie() を使って、データ配列を角度情報(startAngleendAngle)に変換する。
  2. d3.arc() を使って、角度情報を path 要素用の d 属性の値に変換する。
  3. 上記のように作成したデータをもとに path 要素を生成する。

次の例では、データ配列 ([5, 3, 2]) を入力情報として円グラフを描画しています。 ちなみに、扇形の色 (fill) の設定には、d3.scaleOrdinal() で生成したカラースケール関数 を使用しています。

<svg id="svg-7wvnsew" width="300" height="200"></svg>
<script>
const svg = d3.select("#svg-7wvnsew")
const width = +svg.attr("width")
const height = +svg.attr("height")

const data = [5, 3, 2]  // データ配列
const pie = d3.pie()  // 扇形の角度を求める関数
const arc = d3.arc().innerRadius(0).outerRadius(100)  // 角度からパスを生成する関数
const color = d3.scaleOrdinal(d3.schemeCategory10)  // インデックスから色を生成する関数

// 円グラフ用の g 要素を作って SVG の中央に表示するよう位置調整
const pieChart = svg.append("g")
  .attr("transform", `translate(${width/2}, ${height/2}) scale(0.8)`)

// 円グラフの各扇形の path 要素を作成する
pieChart
  .selectAll("path")
  .data(pie(data))
  .join("path")
    .attr("d", arc)
    .attr("fill", (_, i) => color(i))
</script>

表示方法のカスタマイズ

ドーナツチャート

図: ドーナツチャートの描画

arc ジェネレーターの innerRadius() メソッドで、内側の半径を設定すると、ドーナツチャートを描画することができます。

const arc = d3.arc().innerRadius(50).outerRadius(100)

扇形の隙間

図: 扇形の境界線 (arc.padAngle() を使う方法)

arc ジェネレーターの padAngle() メソッドで、各扇形の間の隙間を指定することができます。 この隙間は、ラジアン単位の角度で指定するので、かなり小さい値を指定する必要があります(1 度は 0.017453 ラジアンです)。

// padAngle() を設定するときは innerRadius() も調整する
const arc = d3.arc().innerRadius(1).outerRadius(100).padAngle(0.02)

扇形の境界を表現する方法としては、各扇形の path 要素に stroke スタイルを設定する方法もあります。 むしろこちらの方がシンプルでよいかもしれません。 下記では分かりやすいように黄色で境界線を描画しています。

図: 扇形の境界線(path の stroke 属性を使う方法)
pieChart
  .selectAll("path")
  .data(pie(data))
  .join("path")
    .attr("d", arc)
    .attr("fill", (_, i) => color(i))
    .attr("stroke", "yellow")
    .attr("stroke-width", 2)

ドーナツチャートの中心にテキストを表示

図: 中央にテキスト表示

ドーナツチャートの中心の隙間にテキストを表示するには、単純に SVG の text 要素を追加するだけです。

pieChart.append("text")
  .attr("x", 0)
  .attr("y", 0)
  .attr("text-anchor", "middle") // 水平方向のアンカー
  .attr("dominant-baseline", "middle") // 垂直方向のアンカー
  .attr("font-size", 20)
  .attr("font-weight", 600)
  .attr("fill", "#666")
  .text("合計:" + d3.sum(data))

扇形(円弧)の中にテキストを表示

図: 各データの値を表示

pie(data) で生成した各データを arc.centroid() メソッドに渡すと、扇形の領域の中央座標(重心)を返してくれます。 これを利用して、各扇形(あるいは円弧)の中央にテキストを配置することができます。 ちょっと複雑なので全体のコードを示しておきます。

<svg id="svg-t2om9my" width="300" height="200"></svg>
<script>
const svg = d3.select("#svg-t2om9my")
const width = +svg.attr("width")
const height = +svg.attr("height")

const data = [5, 3, 2]
const pie = d3.pie()
const arc = d3.arc().innerRadius(50).outerRadius(100)
const color = d3.scaleOrdinal(d3.schemeCategory10)

// 円グラフ全体の g 要素
const pieChart = svg.append("g")
  .attr("transform", `translate(${width/2}, ${height/2}) scale(0.8)`)

// 各データごとに g 要素を作っておく
const pieElems = pieChart.selectAll(".pie-elems")
  .data(pie(data))
  .enter()
  .append("g")
  .attr("class", "pie-elems")

// 各扇形の path 要素を作成
pieElems
  .append("path")
  .attr("d", arc).attr("fill", (_, i) => color(i))
  .attr("stroke", "white")
  .attr("stroke-width", 2)

// 各扇形の中央に text 要素を追加
pieElems
  .append("text")
  .attr("transform", (d) => `translate(${arc.centroid(d)})`)
  .attr("text-anchor", "middle") // 水平方向のアンカー
  .attr("dominant-baseline", "middle") // 垂直方向のアンカー
  .attr("font-size", 20)
  .attr("fill", "white")
  .text((d) => d.value)
</script>
更新:
作成:
コマンド説明
curl --help all詳細なヘルプを表示
curl https://example.comGET リクエスト
curl -i https://example.comレスポンスヘッダーも表示
curl -I https://example.comレスポンスヘッダーだけ表示
curl -v https://example.com冗長表示(リクエストとレスポンスのヘッダーを確認可能)
curl -H "Authorization: Bearer TOKEN" https://example.comリクエストヘッダーの指定
curl -b "cookie1=value1; cookie2=value2" http://example.comクッキーの指定
curl -A "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" http://example.comユーザーエージェントの指定
curl -L http://example.comリダイレクト (302) レスポンスを自動処理
curl -O https://example.com/file.txtファイルのダウンロード(同名で保存)
curl -o hoge.txt https://example.com/file.txtファイルのダウンロード(別名で保存)
curl -# -O http://example.com/largefile.zipダウンロードの進捗を表示
curl -r 0-100 http://example.com/file.txt -o partial.txtファイルの一部だけダウンロード
curl -u user:pass --basic http://example.comBASIC 認証(--basic は省略可)
curl -u user:pass --digest http://example.comDigest 認証
curl -k https://example.comサーバー証明書の検証を無視
curl --interface eth0 http://example.com使用するネットワークインタフェースを指定
curl --connect-timeout 0.15 http://example.comタイムアウトの指定(秒単位)
curl -X POST http://example.comPOST リクエスト(データ送信しないときはメソッドの明示が必要)
curl -d "param1=value1&param2=value2" http://example.comPOST でデータ送信
curl --data-urlencode "..." http://example.comPOST でデータ送信(URL エンコード有り)
curl -H "Content-Type: application/json" -d '{"key":"value"}' https://example.comPOST でデータ送信(JSON 形式)
curl -X POST -F "file=@/path/to/file.txt" http://example.com/uploadPOST でファイルのアップロード
curl -X DELETE http://example.com/resourceDELETE リクエスト
curl -4 https://example.comIPv4 の使用を強制
curl -6 https://example.comIPv6 の使用を強制
curl -x {proxy}:{port} https://example.comプロキシ経由でのアクセス
curl -X CUSTOMMETHOD http://example.com独自の HTTP メソッドを指定
curl -u user:pass -O ftp://example.com/file.txtFTP サーバーからファイルをダウンロード
curl -u user:pass ftp://example.com/dirFTP サーバーのディレクトリ内のファイル一覧
curl -T file.txt -u user:pass --ftp-create-dirs -ssl ftp://example.comFTP サーバーへのアップロード
  • テスト用のサーバーとして https://httpbin.org を使うと便利です。どのようなリクエストが送信されたかを、JSON レスポンスとして返してくれます。
    • GET メソッド用アドレス: https://httpbin.org/get
    • POST メソッド用アドレス: https://httpbin.org/post
    • DELETE メソッド用アドレス: https://httpbin.org/delete
  • Windows のコマンドプロンプトではシングルクォートがうまく扱えないので、入れ子になったダブルクォートをエスケープする必要があります。
    • Linux の場合: -d '{"key":"value"}'
    • Windows の場合: -d "{\"key\":\"value\"}"

関連記事

更新:
作成:
種類キー操作説明
移動Ctrl + Bカーソルを左へ移動
移動Ctrl + Fカーソルを右へ移動
移動Ctrl + Aカーソルを行頭へ移動 (beggining-of-line)
移動Ctrl + Eカーソルを行末へ移動 (end-of-line)
移動Alt + ← / Esc, Bカーソルを前の単語へ移動 (backward-word)
移動Alt + → / Esc, Fカーソルを後の単語へ移動 (forward-word)
削除Ctrl + U行全体を削除 (kill-hole-line)
削除Ctrl + Kカーソル位置から行末までを削除 (kill-line)
削除Ctrl + Hカーソルの前の 1 文字を削除 (Backspace)
削除Ctrl + Dカーソル位置の 1 文字を削除 (Del)
削除Ctrl + Wカーソル位置から単語の先頭までを削除 (backward-kill-word)
削除Esc, Dカーソル位置から単語の末尾までを削除 (kill-word)
編集Ctrl + Y貼り付け
編集Ctrl + T前の文字と 1 文字入れ替え (transpose-chars)
編集Esc, Uカーソル位置から単語末尾までを大文字にして、カーソルを単語末尾へ移動 (up-case-word)
編集Esc, Lカーソル位置から単語末尾までを小文字にして、カーソルを単語末尾へ移動 (down-case-word)
編集Esc, Cカーソル位置の 1 文字を大文字にして、カーソルを単語末尾へ移動 (capitalize-word)
編集Esc, T前の単語と 1 単語入れ替え (transpose-words)
履歴Ctrl + P1 つ前のコマンド履歴を表示 (up-line-or-history)
履歴Ctrl + N1 つ後のコマンド履歴を表示 (down-line-or-history)
履歴Ctrl + Rコマンド履歴のインクリメンタルサーチ (history-incremental-search-backward)
履歴Ctrl + Oコマンド履歴からコマンドを実行して次の履歴を表示 (accept-line-and-down-history)
その他Ctrl + J / Ctrl + MEnter (accept-line)
その他Ctrl + I / Tab入力補完
その他Ctrl + G入力を破棄して新しい入力を開始する。インクリメンタルサーチを終了するのにも使える (send-break)
その他Ctrl + L端末(ターミナル)のクリア
その他Ctrl + X, UUndo
  • メモ
    • Alt + ←/→ で単語単位で移動して、Ctrl + W で単語先頭までを削除すれば、任意の位置の単語を削除できます。
    • Esc の代わりに Ctrl + [ を使うことで、ホームポジションを崩さずに操作できます。
    • Ctrl + D はカーソル位置の文字を削除するけど、何も入力されていない状態で入力するとシェルを閉じるので注意。

関連記事

メニュー

まくろぐ
サイトマップまくへのメッセージ