FAQ

一般

Graphic Walkerとは何ですか?

Graphic Walkerは、インタラクティブなデータ可視化のためのオープンソースReactコンポーネントです。グラフィックスの文法アプローチを基盤とした、Tableauのようなドラッグ＆ドロップインターフェースでチャートを作成できます。従来のBIプラットフォームとは異なり、React（またはその他のWeb）アプリケーションに直接埋め込むことができます。

Graphic Walkerはどのライセンスですか?

Graphic WalkerはApache-2.0 License (opens in a new tab)の下でリリースされています。

どのブラウザに対応していますか?

Graphic Walkerはすべてのモダンブラウザで動作します: Chrome、Firefox、Safari、Edge（最新の2バージョン）。Internet Explorerには対応していません。

バンドルサイズはどのくらいですか?

@kanaries/graphic-walkerパッケージは、ミニファイ済みで約1.5MB（Vega-Liteレンダリングエンジンを含む）です。gzip圧縮により、転送サイズは約400KBです。

ReactなしでGraphic Walkerを使用できますか?

はい。パッケージはembedGraphicWalker、embedGraphicRenderer、embedPureRenderer、embedTableWalker関数をエクスポートしており、任意のDOM要素にコンポーネントをマウントできます。Vanilla JS埋め込みドキュメントをご覧ください。

データ

Graphic Walkerはどのくらいのデータを扱えますか?

クライアント側モード（dataプロパティを渡す場合）では、パフォーマンスはブラウザのメモリに依存します。目安として:

大規模データセットの場合は、computationプロパティを使用して処理をサーバーに委譲してください。

どのデータ形式に対応していますか?

Graphic WalkerはJavaScriptオブジェクトの配列（Record<string, any>[]）としてデータを受け付けます。任意の形式から変換できます:

• CSV: Papa Parse (opens in a new tab)またはビルトインのファイルアップロードを使用
• JSON: 直接パース
• データベース: データベースをクエリし、結果をcomputationプロパティに渡す
• API: データをフェッチしてdataプロパティに渡す

データベースに直接接続できますか?

ブラウザコンポーネントから直接接続することはできません。サーバー側計算モードを使用してください: データベースをクエリして結果を返すcomputation関数を実装します。計算ガイドをご覧ください。

レンダリング

Graphic WalkerはSSR（サーバーサイドレンダリング）に対応していますか?

Graphic Walkerはレンダリングにブラウザ環境を必要とします。Next.jsなどのSSRフレームワークでは、ssr: falseでダイナミックインポートを使用してください:

import dynamic from 'next/dynamic';
 
const GraphicWalker = dynamic(
  () => import('@kanaries/graphic-walker').then(m => m.GraphicWalker),
  { ssr: false }
);

レンダリングにCanvasの代わりにSVGを使用できますか?

はい。レイアウト設定またはdefaultConfigプロパティでuseSvg: trueを設定してください:

<GraphicWalker
  data={data}
  fields={fields}
  defaultConfig={{
    layout: { useSvg: true },
  }}
/>

SVGレンダリングはよりシャープな出力を生成しますが、大規模データセットでは遅くなる場合があります。

チャートのサイズを固定するにはどうすればよいですか?

defaultConfigプロパティを使用します:

<GraphicWalker
  data={data}
  fields={fields}
  defaultConfig={{
    layout: {
      size: { mode: 'fixed', width: 800, height: 600 },
    },
  }}
/>

カスタマイズ

UIの一部を非表示にできますか?

はい。以下のプロパティでUIの表示を制御できます:

チャート設定を保存・復元するにはどうすればよいですか?

chartプロパティはIChart[]（チャート仕様の配列）を受け付けます。この配列をバックエンドやlocalStorageに保存し、復元時に渡してください:

// Save
const charts = storeRef.current?.exportAllCharts();
localStorage.setItem('gw-charts', JSON.stringify(charts));
 
// Restore
const saved = JSON.parse(localStorage.getItem('gw-charts') || '[]');
<GraphicWalker data={data} fields={fields} chart={saved} />

トラブルシューティング

チャートが表示されない — 空白の白い領域

よくある原因:

1. データが欠けている: dataが空でない配列であることを確認
2. フィールドが欠けている: fields配列がデータのキーと一致していることを確認
3. SSRの問題: Next.jsを使用している場合、ssr: falseでインポート（上記参照）
4. コンテナサイズ: 親要素に定義された高さが必要

"Field not found"エラー

fields配列のfid値が、データオブジェクトのプロパティ名と正確に一致していることを確認してください。フィールドIDは大文字小文字を区別します。

ダークモードが機能しない

appearanceプロパティ（非推奨のdarkプロパティではなく）を使用していることを確認してください:

<GraphicWalker appearance="dark" data={data} fields={fields} />

パフォーマンスが遅い

• データセットサイズを縮小するか、サーバー側計算に切り替える
• hideProfiling={true}でプロファイリングを無効にする
• SVGの代わりにCanvasレンダリング（デフォルト）を使用する