データベースのデータをD3.jsで使うには?

最終更新日

「データベースのデータをD3.jsで使うには?」という質問をいただいたので記事にしてみました。D3.jsの話というより、バックエンドとフロントエンドをどうやって繋ぐか?という話なりますが。

基本的にはバックエンド側で、データベースのデータをJSON形式で出力するAPIを作り、APIに対してJavaScriptからXMLHttpRequestを使ってデータを受け取るという形が一般的だと思います。

「D3.js Tips and Tricks」にそのものズバリな記事が掲載されていますが、この記事ではphp部分をpdoを使ったコードにしています。

Using a MySQL database as a source of data

バックエンド構成

  • データベース:MySQL
  • WEBサーバー:Apache
  • API:PHP

だいたいこんな感じ。
d32db141023
質問いただいた内容が「PHP+MySQL」ということだったのでこの構成になっていますが、バックエンド側は基本的にJSONで出力する仕組みさえつくれれば何でもOKです。

テーブルの内容(sample_tb)

今回使用するデータの内容は以下です。

id user age tel mail count
1 shimizu 12 00-0000-0000 sample@hoge.ne.jp 120
2 suzuki 23 00-0000-0000 sample@hoge.ne.jp 333
3 tanaka 33 00-0000-0000 sample@hoge.ne.jp 469
4 yamada 42 00-0000-0000 sample@hoge.ne.jp 530
5 uehara 26 00-0000-0000 sample@hoge.ne.jp 432

API.php

テーブルの内容をそのままJSONとして出力するAPIを作ります。

APIを作成したらブラウザからアクセスできるディレクトリにapi.phpを置き、実際にブラウザでアクセスしてみてJSONがちゃんと出力されているか確認すると良いでしょう。

*1 Access-Control-Allow-Originについては下記記事を、
【何ぞ?】Access-Control-Allow-Origin, クロスドメイン制約, 同一生成元ポリシーって何ぞ【XMLHttpRequest】【JavaScript】【Apache】 – DRYな備忘録

*2 PDOの使い方については下記記事を参照ください。
[PHP]PDOを使ったMySQLデータベースへの接続と基本操作 | PHP Archive

フロントエンド側

D3.jsでAPIからデータを受け取ります。

受け取ったデータの内容はこんな感じ。

d3.jsonを使った通信は基本GETリクエストになります。
POSTリクエストでパラメーターなどもAPI側に送りたいという場合は以下を。

JavaScript – d3.jsonでpostリクエストを送信する – Qiita

補足

バックエンドとフロントエンドのつなぎ方は大体こんな感じですかね。
データベース絡めてもっと複雑な事がしたいという意場合は上記のような簡易的なAPIでなく、ちゃんと「RESTful API」を作成するのが良いと思います。
FuelPHPなどのフレームワークを使うとRESTコントローラーが簡単に作れるらしいです。
「はじめてのフレームワークとしてのFuelPHP 第2版」が当選したのでFuelPHPを軽くいじってみました