2

monacaで「d3.js」を使いたいのですが、スクリプトの1行目でエラーが出てしまい動きません。
色々と調べたり試したのですが、完全にはまってしまいました。
どなたかご教授頂けないでしょうか。初心者で申し訳ありませんが何卒よろしくお願い致します。


■エラー内容
スクリプトの1行目で次のようなエラーが出てしまいます。

Uncaught TypeError:Cannot call method'zoom of undefined'


■ソース全文

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

<script>
    // ズーム操作のコンストラクタを作成
    var zoom = d3.behavior.zoom();   // ←ここでエラーが出ます
</script>

</body>
</html>

■エラー時の状況
・monacaにて「JS/CSSコンポーネントの追加と削除」から「jQueri(Monaca ver)」と「d3.js」をダウンロードしています。(表示されたものは全てダウンロードしました。)

・今の環境でテストを行い、「d3.js」が動いていることは確認しました。
(zoomのオブジェクトを作成しようとするとエラーが出ます。)

どうかよろしくお願い致します。


■追記
今回のエラーはmjyさんのご指摘通りd3.jsのバージョン更新によるものでした。
自分が必要だった変更箇所を記載致します。

(旧)d3.behavior.zoom() ⇒ (新)d3.zoom()

// スケール (現在の倍率)
(旧)event.scale ⇒ (新)event.transform.k

// トランスレート (X方向への移動距離)
(旧)event.translate[0] ⇒ (新)event.transform.x

// トランスレート (Y方向への移動距離)
(旧)event.translate[1] ⇒ (新)event.transform.y 
  

1

1 件の回答 1

1

最新版では d3.zoom が正しいです。

The zoom behavior d3.behavior.zoom has been renamed to d3.zoom.
https://github.com/d3/d3/blob/master/CHANGES.md#zooming-d3-zoom

との事です。

1
  • ご指摘ありがとうございます。自分が実装しようとしている内容で、他にも色々とありそうなので時間がかかると思いますが分かったところは記載しようと思います。
    – R.R
    2016年10月15日 18:24

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。