-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path拖拽-svg.html
69 lines (69 loc) · 1.99 KB
/
拖拽-svg.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
</style>
</head>
<body>
<script>
var data = [
{'cx':210, 'cy':210, 'r':50, 'fill':'#ff0000'},
{'cx':75, 'cy':75, 'r':40, 'fill':'#00cc00'},
{'cx':200, 'cy':30, 'r':30, 'fill':'#0000ff'},
{'cx':80, 'cy':190, 'r':80, 'fill':'#0099cc'},
{'cx':100, 'cy':100, 'r':30, 'fill':'#ff9900'}
];
var drag = d3.behavior.drag()
.on('dragstart', function(d) {
// console.log(d3.event);
// react.style({'background': 'red'})
d3.select(this).attr({'fill':'black'});
})
.on('drag', function(d){
console.log(d3.event);
// react.style({
// 'left': (d3.event.x-25)+'px',
// 'top':(d3.event.y-25)+'px',
// 'background':'green'
// });
d3.select(this).attr({
'cx': d.x = d3.event.x,
'cy': d.y = d3.event.y,
});
})
.on('dragend', function(d){
console.log(d3.event);
// react.style({'background':'#000'});
d3.select(this).attr({'fill':d.fill});
});
// var react = d3.select('#r')
// .style({'left':'50px','top':'50px'})
// .call(drag);
var svg = d3.select('body')
.append('svg')
.attr({
'width': '400',
'height': '300'
})
.style({
'border': '1px solid red'
});
svg.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr({
'cx': function(d){return d.cx;},
'cy': function(d){return d.cy;},
'r': function(d){return d.r},
'fill': function(d){return d.fill;}
})
.call(drag);
</script>
</body>
</html>