技術間

IT技術(主にwebとインフラ)についてメモを残していきたいと思っています

TypescriptでD3.jsを使う方法

これはtypescript 2.3.3、D3.js 4.9.1の記事です

D3.jsはデータとDOMを紐付けて操作を行う事ができるライブラリです。 単にDOM操作を行うだけでなく様々なことができるとか・・・。 僕自身そこまで深く使うことはないですが、Angularと合わせて使うことがあったので、TypescriptでD3.jsを使用する方法について書かせて頂きます。

といっても特別な手順はなく、package.jsonを書き換えてnpm installを行い、D3.jsを使用するファイルを書き足すのみで動作します。

変更点は以下のとおりです。

"dependencies": {
  "d3": "^4.9.0"
}
"devDependencies": {
  "@type/d3": "~4.9.0",
  "typescript": "~2.3.3"
}
// D3.jsを使用するtsファイルの最上部
import * as d3 from 'd3';

// function tekitou() {
//   let html = d3.select('html'):
// }

package.jsonにはd3とtypescript、そしてd3のtypescript用型定義モジュールを書き足し、npm installでインストールを行います。

そしてD3.jsを使用するtsファイルの上部にd3をインポートする一行を書き足せば、通常のようにd3を使用することができます。

typescriptの型定義の管理はそこそこ頻繁に手法が変わっているようです。 インターネット上の情報の変遷を見ると、
tsd→typings(typings.json使用)→2017-06現在 typings(package.json使用)
となっていっているようです。 変遷を追うのは大変ですが、管理が楽になっているようで助かりますね。