D3.jsで横向きのBar Graph（棒グラフ）を描画する

kc@example.com (kc kim) — Sun, 16 Apr 2023 16:55:00 +0900

横向きの棒グラフを描画する

iframeをサポートしていないブラウザです。

説明

// データセット
const dataSet = [100, 200, 20, 45, 300];
// グラフを描画する
drawGraph(dataSet);

function drawGraph(dataSet) {
  const maxValue = Math.max(...dataSet);

  const OriginAttr = {
    fill: "rgba(255, 0, 0, 0)"
  };

  d3.select("#graphArea")
    .selectAll("rect")                              // 対象要素を設定
    .data(dataSet)                                  // データセットを設定
    .enter()                                        // データ数に応じて要素を追加
    .append("rect")                                 // SVGの四角形を作成
    .attr("x", 0)                                   // X座標（始点）
    .attr("y", (d, i) => {
      return i * 25;
    })                                              // Y座標（各データセットの描画位置）
    .attr("width", (d, i) => {
      return `${d}px`;
    })                                              // 横棒グラフの横幅（X座標の終点）
    .attr("height", "20px")                         // 横棒グラフの高さ
    .attr("fill", (d, i) => {
      return `rgba(255, 0, 0, ${d / maxValue})`;
    })                                              // 棒グラフの色
    .on("mouseover", function () {
      OriginAttr.fill = this.attributes.fill.value; // 変更前の状態を記憶
      d3.select(this)
        .attr("fill", "blue");                      // 選択されたグラフの色を変更
    })
    .on("mouseout", function () {
      d3.select(this)
        .attr("fill", OriginAttr.fill);             // 変更前の状態に戻す
    });
}

D3.js forceSimulationの座標更新アルゴリズム/実行関数

kc@example.com (kc kim) — Sat, 20 May 2023 16:38:53 +0900

ノード間の相互作用力の設定についてはこちらを、リンク設定についてはこちらを確認する。

座標更新情報

D3.jsのforceSimulationでは、原点を(0, 0)とし、1ステップの位置変化量を(vx, vy)とすると、次の関数で位置変化量を計算する。

function force(alpha) {
  for (var i = 0, n = nodes.length, node, k = alpha * 0.1; i < n; ++i) {
    node = nodes[i];
    node.vx -= node.x * k;
    node.vy -= node.y * k;
  }
}

原点、つまり指定したx、yからの距離にalpha * 0.1を掛けた分だけ座標を更新する。alphaが1であれば、10%ずつ原点に近づくように移動する。

また、alphaはシミュレーションの1ステップごとに次の式が加算され、更新される。

( alphaTarget – alpha ) * alphaDecay

デフォルトのalphaTargetは0、alphaDecayは0.0228であるため、alphaは徐々に減少する。このalphaがalphaMin、デフォルト値0.001を下回るとシミュレーションは停止する。デフォルトでは約300回の反復計算が実行される設定である。次の機能を使用して、これらの設定とシミュレーション実行を制御できる。

simulation実行関数

関数	説明
`simulation.restart()`	シミュレーションを再開する。ドラッグなどのイベント発生時に、停止したシミュレーションを起動したいときに使用する。
`simulation.stop()`	シミュレーションを停止する。すでに停止している場合は何も行わない。
`simulation.tick()`	シミュレーションの内部関数である。シミュレーション作成時、または`restart()`によって呼び出される。
`simulation.node()`	ノードを指定する。使用方法はこちらを参照する。
`simulation.alpha()`	`alpha`の値を0.0から1.0の間で設定する。デフォルト値は1である。値を指定しない場合は現在のalpha値を返す。
`simulation.alphaMin()`	alphaMinの値を0.0から1.0の間で設定する。デフォルト値は0.001である。値を指定しない場合は現在のalpha値を返す。シミュレーションは現在のalphaがalphaMinより小さいときに停止する。
`simulation.alphaDecay()`	`alphaDecay`の値を0.0から1.0の間で設定する。デフォルト値は`0.0228(=1-pow(0.001, 1/300))`である。値を指定しない場合は現在の`alphaDecay`値を返す。 `alphaDecay`が大きいほどシミュレーションは速く収束するが、局所解にとどまる可能性がある。 `alphaDecay`の値を小さくするとシミュレーションの実行に時間がかかるが、より良いレイアウトへ収束する。シミュレーションを永続的に続けるには、alphaDecayを0に設定するか、alphaTargetをalphaMinより大きい値に設定する。
`simulation.alphaTarget()`	`alphaTarget`の値を0.0から1.0の間で設定する。デフォルト値は`0`である。値を指定しない場合は現在の`alphaTarget`値を返す。
`simulation.velocityDecay()`	ノードの速度減衰係数を設定する。 0.0から1.0の値を設定できる。値が設定されていない場合は、現在の速度減衰係数を返す。デフォルト値は0.4である。現在の速度に`(1 - velocityDecay)`の値が掛けられ、値が大きいほど速度減衰が大きくなる。 `0`に設定するとノードは振動し続け、1に設定すると速度は変化しない。
`simulation.force()`	ノード間およびリンクの相互作用を設定する関数である。ノード間についてはこちらを、リンクについてはこちらを参照する。
`simulation.find(x,y[,radius])`	指定された検索半径内で、位置（`x`, `y`）に最も近いノードを返す。 `radius`を指定しない場合、探索半径は無限大になる。検索領域にノードがない場合は`undefined`を返す。
`simulation.on(typenames, [listener])`	イベントリスナーを登録する。同じタイプと名前のイベントリスナーがすでに登録されている場合、新しいリスナーで上書きする。 `listener`が`null`の場合、イベントリスナーを削除する。 `typenames`には`"tick"`と`"end"`を指定できる。 `tick`: シミュレーションステップの更新時 `end`: シミュレーション完了時（`alpha` < `alphaMin`）

付録: 用語

decay

[名詞] 腐敗、腐食
[名詞] 社会制度などの衰退、退廃
[動詞] 腐敗する、腐る。腐敗させる、腐らせる
[動詞] 建物や地域が荒廃する

velocity

[名詞][専門用語] 速度
[名詞][格式] 速い速度

tick

[動詞] カチカチ鳴る
[動詞] 正解などにチェックマークを付ける
[名詞] チェックマーク
[名詞] ダニ

devkuma – D3.js