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 22:29
2018/01/15 11:45
2018/01/15 14:49 編集
2018/01/16 11:46
2018/01/16 13:43