-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
96 lines (89 loc) · 2.87 KB
/
index.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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>svg-connect-area</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="title">svg-connect-area</h1>
<p>Javascript library for creating join areas for four points</p>
<a href="https://github.com/trinary/svg-connect-area">Github Project</a>
<p>Drag the grey handles around.</p>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="vertical-curve" checked>
S-Curve
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="linear-step">
Linear-step
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="linear">
Linear
</label>
</div>
<br/>
<div class="svg-container">
</div>
<script id="live-reload" src="http://localhost:35729/livereload.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="connector.js"></script>
<script>
var svg = d3.select(".svg-container").append("svg");
svg.attr("width", "100%").attr("height", 640);
var p1 = [30,10], p2 = [300,80], p3 = [300,300], p4 = [30,120];
var points = [[p1,p4], [p2,p3]];
var connectFn = svgConnector().type("vertical-curve");
var handles = svg.append("g")
.classed("handles", true)
.selectAll("rect")
.data(points);
var radio = d3.selectAll(".radio").on("change", function(d) {
var value = d3.event.target.value;
connectFn = connectFn.type(value);
myConn.attr("d", connectFn(points));
});
var myConn = svg.append("path").classed("connect", true).attr("d", connectFn(points));
handles.enter()
.append("rect")
.attr({
width: 20,
height: function(d,i) { return d[1][1] - d[0][1];},
x: function(d,i) { return i==0 ? d[0][0] : d[0][0]; },
y: function(d,i) { return d[0][1]; },
cursor: "move",
class: function(d,i) { return i==0 ? "left" : "right" }
})
.style({
fill: "#cccccc",
stroke: "#333333",
"stroke-width": "1px"
})
.call(d3.behavior.drag()
.origin(function(d) { return {x: d[0][0], y:d[0][1]}; })
.on("drag", function(d) {
d.x = d3.event.x, d.y = d3.event.y;
var handle = d3.select(this);
handle.attr("x", d.x).attr("y", d.y);
if (handle.classed("left")) {
points[0][0][0] += d3.event.dx;
points[0][0][1] += d3.event.dy;
points[0][1][0] += d3.event.dx;
points[0][1][1] += d3.event.dy;
} else {
points[1][0][0] += d3.event.dx;
points[1][0][1] += d3.event.dy;
points[1][1][0] += d3.event.dx;
points[1][1][1] += d3.event.dy;
}
myConn.attr("d", connectFn(points));
}));
</script>
</body>
</html>