編集履歴

質問編集履歴

使用したものを追記に記載しました。

2016/10/16 04:42

投稿

t33

スコア33

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -183,3 +183,29 @@
 申し訳ありませんがどなたかご教授の頂けないでしょうか。よろしくお願い致します。
+###追記
+後日自分が必要になった箇所を記載致します。
+(旧)d3.behavior.zoom() ⇒ (新)d3.zoom()
+// スケール (現在の倍率)
+(旧)event.scale ⇒ (新)event.transform.k
+// トランスレート (X方向への移動距離)
+(旧)event.translate[0] ⇒ (新)event.transform.x
+// トランスレート (Y方向への移動距離)
+(旧)event.translate[1] ⇒ (新)event.transform.y

ソースを種別ごとに囲むように修正しました。

2016/10/16 04:42

投稿

t33

スコア33

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -162,6 +162,10 @@
 } ) ;
+</body>
+</html>
     </script>
 ```

ソースを種別毎に囲むように修正しました。

2016/10/16 03:54

投稿

t33

スコア33

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,8 +1,6 @@
 ###概要
-コード
-```
 Monacaで「D3.js」プラグインを使用したいのですが、１行目でエラーが出ます。
@@ -41,6 +39,8 @@
 ###ソース全文
+```HTML
 <!DOCTYPE HTML>
@@ -90,7 +90,11 @@
 <p><a id="method2">解除</a></p>
+```
+```JavaScript
 <script>
@@ -160,9 +164,9 @@
     </script>
-</body>
+```
-</html>
@@ -175,181 +179,3 @@
 申し訳ありませんがどなたかご教授の頂けないでしょうか。よろしくお願い致します。
-###概要
-コード
-```
-Monacaで「D3.js」プラグインを使用したいのですが、１行目でエラーが出ます。
-初心者で色々調べたのですが全く分からなかった為こちらに質問致しました。何卒よろしくお願いします。
-エラーメッセージ
-Uncaught TypeError:Cannot call method 'zoom' of undefined
-###該当のソースコード
-<script>
-   var zoom = d3.behavior.zoom() ;       ←ここでエラーが出ます。
-</script>
-###ソース全文
-<!DOCTYPE HTML>
-<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>
-	<div id="parent">
-    <img src="img/dot_test.png" id="target">
-</div>
-<p class="coordinate">scale: <mark id="scale">?</mark></p>
-<p class="coordinate">translate: [ <mark class="translate">?</mark>, <mark class="translate">?</mark> ]</p>
-<p><a id="method1">設定</a></p>
-<p><a id="method2">解除</a></p>
-<script>
-    // ズーム操作のコンストラクタを作成
-var zoom = d3.behavior.zoom() ;
-//var zoom = d3.zoom() ;
-// ズーム操作に対応するイベントリスナーを指定する
-zoom.on( "zoom", function() {
-    // イベントオブジェクト
-    var event = d3.event ;
-    // スケール (現在の倍率)
-    var scale = event.scale ;
-	// トランスレート (X方向、Y方向への移動距離)
-	var tx = event.translate[0] ;
-	var ty = event.translate[1] ;
-	// 出力
-	d3.select( "#scale" ).text( scale ) ;
-	d3.selectAll( ".translate" ).data( event.translate ).text( function( d, i ) { return d ; } ) ;
-} ) ;
-// クリックイベント
-d3.select( "#method1" ).on( "click", function() {
-	// div要素に対して、call()メソッドでズーム操作を適用
-	d3.select( "#parent" ).call( zoom ) ;
-} ) ;
-// クリックイベント
-d3.select( "#method2" ).on( "click", function() {
-	// div要素に指定したズーム操作のイベントを削除
-	d3.select( "#parent" ).on( ".zoom", null ) ;
-} ) ;
-    </script>
-</body>
-</html>
-###補足
-・「D3.js」、「jQueri」のプラグインはMonaca内の「CSS/JSコンポーネントの追加と削除」から表示されたものを全てダウンロードしています。
-申し訳ありませんがどなたかご教授の程、頂けないでしょうか。よろしくお願い致します。

文字の修正を行いました。

2016/10/16 03:52

投稿

t33

スコア33

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -74,6 +74,184 @@
 	<div id="parent">
+    <img src="img/test.png" id="target">
+</div>
+<p class="coordinate">scale: <mark id="scale">?</mark></p>
+<p class="coordinate">translate: [ <mark class="translate">?</mark>, <mark class="translate">?</mark> ]</p>
+<p><a id="method1">設定</a></p>
+<p><a id="method2">解除</a></p>
+<script>
+    // ズーム操作のコンストラクタを作成
+var zoom = d3.behavior.zoom() ;
+//var zoom = d3.zoom() ;
+// ズーム操作に対応するイベントリスナーを指定する
+zoom.on( "zoom", function() {
+    // イベントオブジェクト
+    var event = d3.event ;
+    // スケール (現在の倍率)
+    var scale = event.scale ;
+	// トランスレート (X方向、Y方向への移動距離)
+	var tx = event.translate[0] ;
+	var ty = event.translate[1] ;
+	// 出力
+	d3.select( "#scale" ).text( scale ) ;
+	d3.selectAll( ".translate" ).data( event.translate ).text( function( d, i ) { return d ; } ) ;
+} ) ;
+// クリックイベント
+d3.select( "#method1" ).on( "click", function() {
+	// div要素に対して、call()メソッドでズーム操作を適用
+	d3.select( "#parent" ).call( zoom ) ;
+} ) ;
+// クリックイベント
+d3.select( "#method2" ).on( "click", function() {
+	// div要素に指定したズーム操作のイベントを削除
+	d3.select( "#parent" ).on( ".zoom", null ) ;
+} ) ;
+    </script>
+</body>
+</html>
+###補足
+・「D3.js」、「jQueri」のプラグインはMonaca内の「CSS/JSコンポーネントの追加と削除」から表示されたものを全てダウンロードしています。
+申し訳ありませんがどなたかご教授の頂けないでしょうか。よろしくお願い致します。
+###概要
+コード
+```
+Monacaで「D3.js」プラグインを使用したいのですが、１行目でエラーが出ます。
+初心者で色々調べたのですが全く分からなかった為こちらに質問致しました。何卒よろしくお願いします。
+エラーメッセージ
+Uncaught TypeError:Cannot call method 'zoom' of undefined
+###該当のソースコード
+<script>
+   var zoom = d3.behavior.zoom() ;       ←ここでエラーが出ます。
+</script>
+###ソース全文
+<!DOCTYPE HTML>
+<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>
+	<div id="parent">
     <img src="img/dot_test.png" id="target">
 </div>
@@ -174,182 +352,4 @@
-申し訳ありませんがどなたかご教授の頂けないでしょうか。よろしくお願い致します。
-###概要
-コード
-```
-Monacaで「D3.js」プラグインを使用したいのですが、１行目でエラーが出ます。
-初心者で色々調べたのですが全く分からなかった為こちらに質問致しました。何卒よろしくお願いします。
-エラーメッセージ
-Uncaught TypeError:Cannot call method 'zoom' of undefined
-###該当のソースコード
-<script>
-   var zoom = d3.behavior.zoom() ;       ←ここでエラーが出ます。
-</script>
-###ソース全文
-<!DOCTYPE HTML>
-<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>
-	<div id="parent">
-    <img src="img/dot_test.png" id="target">
-</div>
-<p class="coordinate">scale: <mark id="scale">?</mark></p>
-<p class="coordinate">translate: [ <mark class="translate">?</mark>, <mark class="translate">?</mark> ]</p>
-<p><a id="method1">設定</a></p>
-<p><a id="method2">解除</a></p>
-<script>
-    // ズーム操作のコンストラクタを作成
-var zoom = d3.behavior.zoom() ;
-//var zoom = d3.zoom() ;
-// ズーム操作に対応するイベントリスナーを指定する
-zoom.on( "zoom", function() {
-    // イベントオブジェクト
-    var event = d3.event ;
-    // スケール (現在の倍率)
-    var scale = event.scale ;
-	// トランスレート (X方向、Y方向への移動距離)
-	var tx = event.translate[0] ;
-	var ty = event.translate[1] ;
-	// 出力
-	d3.select( "#scale" ).text( scale ) ;
-	d3.selectAll( ".translate" ).data( event.translate ).text( function( d, i ) { return d ; } ) ;
-} ) ;
-// クリックイベント
-d3.select( "#method1" ).on( "click", function() {
-	// div要素に対して、call()メソッドでズーム操作を適用
-	d3.select( "#parent" ).call( zoom ) ;
-} ) ;
-// クリックイベント
-d3.select( "#method2" ).on( "click", function() {
-	// div要素に指定したズーム操作のイベントを削除
-	d3.select( "#parent" ).on( ".zoom", null ) ;
-} ) ;
-    </script>
-</body>
-</html>
-###補足
-・「D3.js」、「jQueri」のプラグインはMonaca内の「CSS/JSコンポーネントの追加と削除」から表示されたものを全てダウンロードしています。
 申し訳ありませんがどなたかご教授の程、頂けないでしょうか。よろしくお願い致します。