-
Notifications
You must be signed in to change notification settings - Fork 1
/
profile_interactor_demo.html
106 lines (86 loc) · 2.07 KB
/
profile_interactor_demo.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
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<meta charset="utf-8">
<style>
html, body {
height: 100%;
overflow: hidden;
}
svg {
float: left;
border-bottom: solid 1px #ccc;
border-right: solid 1px #ccc;
margin-right: -1px;
margin-bottom: -1px;
}
svg .interactors {
cursor: move;
}
svg circle.corner {
stroke-width: 0px;
}
svg circle.corner.selected {
stroke: DarkOrange;
stroke-width: 8px;
}
</style>
<body>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="jquery-extend.js"></script>
<script src="profile-interactor.js"></script>
<script>
var width = d3.select("body").node().clientWidth - 50,
height = d3.select("body").node().clientHeight - 50,
radius = 5;
var x = d3.scale.linear()
.domain([-200,2000])
.range([0, width])
var y = d3.scale.linear()
.domain([0, 10])
.range([height, 0]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var x0 = 5,
y0 = 5;
var profile_data1 = [
{thickness: 0, sld: 2.069, mu: 0},
{thickness: 1250, sld: 4.5, mu: 0},
{thickness: 100, sld: 0.0, mu: 0}
];
var profile_data2 = [
{thickness: 0, sld: 3, mu: 1},
{thickness: 900, sld: 2.5, mu: 2.0},
{thickness: 100, sld: 1.0, mu: 0}
];
var opts1 = {
type:'Profile',
name:'profile_1',
radius: 5,
series: [
{"id": "sld"},
{"id": "mu"}
],
profile_data: profile_data1
}
var opts2 = {
type:'Profile',
name:'profile_2',
series: [
{"id": "sld", "color1": "blue"},
{"id": "mu", "color1": "green"}
],
profile_data: profile_data2
}
var profile1 = new profileInteractor(opts1, x, y);
var profile2 = new profileInteractor(opts2, x, y);
var constraints = [
function(p, d, i) {p[0].thickness = 0},
function(p, d, i) {p.slice(-1)[0].mu = 0},
function(p, d, i) {p.slice(-1)[0].thickness = 0},
function(p, d, i) {p[i].thickness = Math.max(p[i].thickness, 0)}
];
profile1.constraints(constraints);
profile2.constraints(constraints);
svg.call(profile1);
svg.call(profile2);
</script>