/
index.html
85 lines (75 loc) · 1.6 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
<!DOCTYPE html>
<html>
<head>
<title>D3.js esempio</title>
</head>
<body>
<svg id="grafico" width="1000" height="500"></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script type="text/javascript">
console.log("ciao");
var punti = [{
'x': 4,
'y': 10
}, {
'x': 8,
'y': 12
}, {
'x': 30,
'y': 58
}, {
'x': 57,
'y': 35
}, {
'x': 69,
'y': 66
}, {
'x': 100,
'y': 80
}];
var vis = d3.select("#grafico"),
WIDTH = 1000,
HEIGHT = 500,
MARGINS = {
top: 20,
right: 20,
bottom: 20,
left: 50
};
// proporzioni asse X
x = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([0,100]);
// proporzioni asse Y
y = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0,100]);
xAxis = d3.svg.axis()
.scale(x)
.tickSize(1)
.tickSubdivide(true),
yAxis = d3.svg.axis()
.scale(y)
.tickSize(1)
.orient("left")
.tickSubdivide(true);
vis.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
.call(xAxis);
vis.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(" + (MARGINS.left) + ",0)")
.call(yAxis);
var disegna = d3.svg.line()
.x(function (d) {
return x(d.x);
})
.y(function (d) {
return y(d.y);
})
.interpolate('linear');
vis.append("svg:path")
.attr("d", disegna(punti))
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none");
</script>
</body>
</html>