D3.js v4 でドラッグするには d3.drag() で behavior を取得する
D3.jsでドラッグイベントを処理する必要があったのですよ。
ほぼ初めてのD3ですからグーグル先生にいろいろ聞いて、「ほうほうなるほど」と学習していたのですけど、 ドラッグに関して各所で示されていたサンプル通りにやってみたら、まさかのエラー。
結局は、大きな問題ではありませんで、ひと言で言ってしまえばバージョン違いだったのですが、どうにも日本語の情報が少ないようなので書いておきます。
レゴ (LEGO) スピードチャンピオン シボレー カマロ ドラッグレース 75874
posted with amazlet at 17.04.18
Learning D3.JS 4.x Data Visualization - Third Edition
posted with amazlet at 17.04.18
Packt Publishing (2017-04-20)
D3.js/v3でのコード
「D3.js ドラッグ」などと検索して出てくるサンプルコードの多くが、D3.jsのv3(バージョン3)のために書かれたコードで、最新のv4では動かないんですね。
v3でドラッグするには、d3.behavior.drag()
で、Drag Behavior を取得するのですが、v4ではこれが動かない。
// D3.js v3でDrag Behaviorを取得 var drag = d3.behavior.drag(); //V4ではエラー
D3.js/v4でのOKコード
じゃあどうやるんだって―と、v4以降では以下のように、d3.drag()
とするのだそうだ。
// D3.js/V4 でDrag Behaviorを取得 var drag = d3.drag(); // これでOK
リンク
リポジトリの CHANGES にはしっかり書いてありました。
CHANGES
github.com
Dragに関する詳細は以下に
github.com
いやしかし
メジャーバージョンが上がっているので、APIに互換性がなくなってても文句は言わない約束だけど、 レガシーコードには警告を出すとかって対応があればモアベターね。