swrライブラリを使ってd3経由で読み込んだCSVファイルからグラフ表示するやり方について

こんにちは。nap5です。

swrライブラリを使ってd3経由で読み込んだCSVファイルからグラフ表示するやり方について紹介したいと思います。

使用するCSVデータはこちらのgistから拝借しています。

d3のPromiseだと即時関数でasyncなコンテキストを一度作ってからでないと、awaitでfulfilledなバリューを取り出すことができないですが、useSWRフックを使うと宣言的に実装できるという例になります。

実装だと以下のような感じになります。

const {data, error} = useSWR(`wine`, async (key) => {
    try {
      const response = await d3.csv('/data/wine.csv');
      const columns = response.columns;
      return {
        items: response.map((item, index) => {
          return Object.entries(item).reduce((acc, [key, value]) => {
            return Object.assign(acc, {
              [key]: +value,
            });
          }, {});
        }),
        columns: columns.map((column) => {
          return {
            name: column,
          };
        }),
      };
    } catch (error) {
      return error;
    }
  });

実際に組み込んだ例は以下のURLから確認できます。スクロールテリングの中盤あたりから確認できます。