AutoCAD JavaScript API TIPS ～ 4 D3.js編

この連載では、AutoCAD JavaScript API と連携してご利用いただける HTML5 ベースのオープンソースライブラリをご紹介いたします。

前回は、HTML5 Canvas 上で、アイソメトリックな図形を描画できるグラフィックスライブラリ Isomerについてご紹介いたしました。

今回は D3.js をご紹介いたします。

D3.js

D3.js は、HTML、SVG、CSSを使用したデータを視覚化するためのオープンソースのグラフィックスライブラリです。
様々なデータ表現のためのコンポーネントが用意されており、特定のフレームワークに縛られることなく、モダンブラウザ上でデータをビジュアライズすることができます。

データドリブン（データ駆動型）の設計思想に基づいて開発されており、任意のデータからHTMLのテーブルを作成したり、同時にグラフやチャートを生成することができます。データを更新すれば、そのデータから生成されたドキュメントは対話的・同期的に更新させることができます。

今回は、AutoCADの図面データベースのグラフィカルオブジェクトの一覧から、オブジェクトをタイプ別に集計してパイチャートで表示するサンプル（ADNチームのKean Walmsleyが作成したサンプルプロジェクト）をお見せしたいと思います。

AutoCADのプログラムでは、モデル空間上に配置されているブロックテーブルレコードのオブジェクト配列を取得し、LINQを使用してオブジェクトタイプ毎にグループ化して数量をカウントしています。その集計結果をJSON形式に変換して、AutoCAD JavaScript APIを通じてJavaScriptにデータを渡しています。

D3.jsのグラフコンポーネントの生成はシンプルで、オプションを指定することでラベル、エフェクト、マウスイベントのコールバックなどをカスタマイズすることができます。

たとえば、モデル空間上のブロック図形に対してカスタム属性を定義しておき、このカスタム属性に基づいてデータを集計してグラフで表示するといった使い方も考えられます。またコンポーネントに対してのユーザー操作（クリック等）に応じて、図面上でこれを強調表示したり、あるいは編集するといったこともできるでしょう。

ご興味のある方は、ぜひ一度お試しください。

By Ryuji Ogasawara