質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
D3.js

D3.jsとは、データに基づいてHTMLやSVGドキュメントを編集するために作られた、小規模なオープンソースのJavaScript可視化ライブラリです。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

3861閲覧

d3.jsにてドラッグアンドドロップでオブジェクトを操作したい

yaruki_se

総合スコア15

D3.js

D3.jsとは、データに基づいてHTMLやSVGドキュメントを編集するために作られた、小規模なオープンソースのJavaScript可視化ライブラリです。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2018/01/14 09:38

編集2022/01/12 10:55

表題の通りです。

画面上に2つの矩形オブジェクトを表示して
ドラッグアンドドロップでそれぞれを操作できるようにしたいんですが
以下のようにソースを作成してみましたが正常に操作できません。

現象については、一方をドラッグしたあともう一方をドラッグすると
表示位置がずれてしまって正しい制御ができない状況です。
どなたか解決方法がわかる方いましたら教えて下さい。

http://segrfg.opal.ne.jp/

javascript

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf8"> 5 <style> 6 #canvas { 7 background: #666; 8 } 9 </style> 10 <script src="http://d3js.org/d3.v3.min.js"></script> 11 <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 12 <script type="text/javascript"> 13 $(function(){ 14 var svg = d3.select("#svg"); 15 16         // dragイベント 17 drag = d3.behavior.drag() 18 .on("drag", function(d,i) { 19 d.x += d3.event.dx; 20 d.y += d3.event.dy; 21 d3.select(this).attr("transform", function(d,i){ 22 return "translate(" + [ d.x,d.y ] + ")"; 23 }); 24 }); 25 26         // 矩形を表示する 27 var dataSet = [{x:100,y:100,w:100,h:100},{x:100,y:100,w:100,h:100}]; 28 svg.append("g") 29 .append('rect') 30 .data(dataSet) 31 .attr('x', function(d,i){ 32 return d.x; 33 }) 34 .attr('y', function(d,i){ 35 return d.y; 36 }) 37 .attr('width', function(d,i){ 38 return d.w; 39 }) 40 .attr('height', function(d,i){ 41 return d.h; 42 }) 43 .call(drag); 44 45         // もう一つ矩形を表示する 46 svg.append("g") 47 .append('rect') 48 .data(dataSet) 49 .attr('x', function(d,i){ 50 return d.x; 51 }) 52 .attr('y', function(d,i){ 53 return d.y; 54 }) 55 .attr('width', function(d,i){ 56 return d.w; 57 }) 58 .attr('height', function(d,i){ 59 return d.h; 60 }) 61 .call(drag); 62 63 }); 64 </script> 65 </head> 66 <body> 67 <svg id="svg" width="1000" height="1000"></svg> 68 </body> 69</html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf8"> 5 <style> 6 #canvas { 7 background: #666; 8 } 9 </style> 10 <script src="http://d3js.org/d3.v3.min.js"></script> 11 <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 12 <script type="text/javascript"> 13 $(function(){ 14 var svg = d3.select("#svg"); 15     // dragイベント 16 var drag = d3.behavior.drag() 17 .on("drag", function(d) { 18 d.x = d3.event.x; 19 d.y = d3.event.y; 20 d3.select(this).attr("x", d.x).attr("y", d.y); 21 }); 22 23     // 矩形を表示する 24 var dataSet = [{x:100,y:100,w:100,h:100}, {x:100,y:100,w:100,h:100}, {x:250,y:100,w:100,h:100}]; 25 svg.selectAll("rects") 26 .data(dataSet) 27 .enter() 28 .append("g") 29 .append('rect') 30 .attr('x', function(d,i){ 31 return d.x; 32 }) 33 .attr('y', function(d,i){ 34 return d.y; 35 }) 36 .attr('width', function(d,i){ 37 return d.w; 38 }) 39 .attr('height', function(d,i){ 40 return d.h; 41 }) 42 .call(drag); 43 }); 44 </script> 45 </head> 46 <body> 47 <svg id="svg" width="1000" height="1000"></svg> 48 </body> 49</html>

■参考情報
d3-drag#event_on

--
218/01/15コメント欄の要望を元に追加
■案1)質問文に合わせた形に

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf8"> 5 <style> 6 #canvas { 7 background: #666; 8 } 9 </style> 10 <script src="http://d3js.org/d3.v3.min.js"></script> 11 <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 12 <script type="text/javascript"> 13 $(function(){ 14 var svg = d3.select("#svg"); 15     // dragイベント 16 var drag = d3.behavior.drag() 17 .on("drag", function(d) { 18 d.x = d3.event.x; 19 d.y = d3.event.y; 20 d3.select(this).attr("x", d.x).attr("y", d.y); 21 }); 22     // 矩形を表示する 23 var dataSet = [{x:100,y:100,w:100,h:100},{x:250,y:100,w:100,h:100}]; 24 svg.append("g") 25 .append('rect') 26 .data([dataSet[0]]) 27 .attr('x', function(d,i){ 28 return d.x; 29 }) 30 .attr('y', function(d,i){ 31 return d.y; 32 }) 33 .attr('width', function(d,i){ 34 return d.w; 35 }) 36 .attr('height', function(d,i){ 37 return d.h; 38 }) 39 .call(drag); 40 41     // もう一つ矩形を表示する 42 svg.append("g") 43 .append('rect') 44 .data([dataSet[1]]) 45 .attr('x', function(d,i){ 46 return d.x; 47 }) 48 .attr('y', function(d,i){ 49 return d.y; 50 }) 51 .attr('width', function(d,i){ 52 return d.w; 53 }) 54 .attr('height', function(d,i){ 55 return d.h; 56 }) 57 .call(drag); 58 }); 59 </script> 60 </head> 61 <body> 62 <svg id="svg" width="1000" height="1000"></svg> 63 </body> 64</html>

■案2)関数化(drawRect)

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf8"> 5 <style> 6 #canvas { 7 background: #666; 8 } 9 </style> 10 <script src="http://d3js.org/d3.v3.min.js"></script> 11 <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 12 <script type="text/javascript"> 13 $(function(){ 14 var svg = d3.select("#svg"); 15     // dragイベント 16 var drag = d3.behavior.drag() 17 .on("drag", function(d) { 18 d.x = d3.event.x; 19 d.y = d3.event.y; 20 d3.select(this).attr("x", d.x).attr("y", d.y); 21 }); 22 function drawRect(dataSet, index){ 23 svg.append("g") 24 .append('rect') 25 .data([dataSet[index]]) 26 .attr('x', function(d,i){ 27 return d.x; 28 }) 29 .attr('y', function(d,i){ 30 return d.y; 31 }) 32 .attr('width', function(d,i){ 33 return d.w; 34 }) 35 .attr('height', function(d,i){ 36 return d.h; 37 }) 38 .call(drag); 39 } 40     41 var dataSet = [{x:100,y:100,w:100,h:100},{x:250,y:100,w:100,h:100}]; 42 // 矩形を表示する 43 drawRect(dataSet, 0); 44 // もう一つ矩形を表示する 45 drawRect(dataSet, 1); 46 }); 47 </script> 48 </head> 49 <body> 50 <svg id="svg" width="1000" height="1000"></svg> 51 </body> 52</html>

■余談
そもそも論ですが、質問文のコードを以下コードに変更すると分かるのですが、
質問文のコードは2個描画していなく1個目の座標を2回描画しています。。
var dataSet = [{x:100,y:100,w:100,h:100},{x:250,y:100,w:100,h:100}];

投稿2018/01/14 18:55

編集2018/01/15 04:59
umyu

総合スコア5846

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yaruki_se

2018/01/14 22:29

ありがとうございます 大変参考になりました ただ色々あって、矩形を描画する箇所は 質問に書かせていただいたように二箇所に分けて書きたいのですが この場合は無理でしょうか?
yaruki_se

2018/01/15 11:45

修正して頂いてありがとうございます ただ、そちらのソースでは マウスイベントのdx、dyではなくx,yを使用されているので 動作が違っているようです 常にオブジェクトの(0,0)座標のみが 対象になってしまうので動作が不自然になってしまうようです
umyu

2018/01/15 14:49 編集

>動作が不自然になってしまうようです もう少し具体的な状況と希望する動作を指摘して頂きたいのですが、以下のソースコードに変更してみても希望の動作でないのでしたら、私の技術力では対応できないので、申し訳ないのですが、他の人の回答を待ってくださいな。 var drag = d3.behavior.drag() .on("drag", function(d) { d.x += d3.event.dx; d.y += d3.event.dy; d3.select(this).attr("x", d.x).attr("y", d.y); });
yaruki_se

2018/01/16 11:46

オブジェクトを交互にドラッグすると位置が大幅にずれてしまう現象は発生しておりますでしょうか? 私の環境にしか発生しない現象なんでしょうか?
umyu

2018/01/16 13:43

こちらの環境(Chrome バージョン: 63.0.3239.132(Official Build) (64 ビット))では再現しません。 1,ブラウザのスーパーリロードは試されましたか? 2,回答文のコードのみで実行確認したという認識で大丈夫ですよね?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問