-
Notifications
You must be signed in to change notification settings - Fork 1
/
d3maze.js
102 lines (85 loc) · 2.19 KB
/
d3maze.js
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
var w ,
h ,
scale ,
rectHeight;
//poinData in initialized in mazeIO.js
var chart;
function d3Init(){ // Previously was d3Do
pointData = [20,20, 0]; //d3 data for points
w = 500,
h = 400,
scale = 1;//w / d3.max(pointData),
rectHeight = h/ (pointData.length *2 );
chart = d3.select("body").append("svg")
.attr("width", 2*w)
.attr("height", h)
.attr("class", "chart");
chart.selectAll("rect")
.data(pointData)
.enter().append("rect")
.attr("y", function(d,i) {
return 2*i * rectHeight + rectHeight/2; })
.attr("x", rectX)
.attr("width", rectWidth)
.attr("height", rectHeight);
chart.selectAll("text")
.data(pointData)
.enter().append("text")
.attr("x", w)
.attr("y", function(d, i) { return 2 * i * rectHeight + rectHeight; })
.attr("dx", -3 )//function(x){ return x>0 ? -3 + w/2 : 20 + w/2; }) // padding-right
.attr("dy", ".35em") // vertical-align: middle
.attr("text-anchor", "end") // text-align: right
.text(String);
chart.append("line")
.attr("x1", w)
.attr("x2", w)
.attr("y1", 0)
.attr("y2", h )
.style("stroke", "#000");
}
var rectWidth = function (d,i){
if(d<0)
return d *-1 *scale ;
else
return d*scale;
};
var rectX = function(d,i){
if(d<0){
return w - rectWidth(d,i);
}
else{
return w;
}
};
var textX = function(d,i){
var ret;
if(d >= 0){
ret = w + d -3;
}else{
ret = w + d + 25;
}
if(ret<20 && ret > -25){
if(d >= 0){
ret = 170;
}
else{
ret = h;
}
}
return ret;
};
function redraw() { // Update…
// if you get a bug on this line just do a check to make sure chart is defined and do nothing if it is not
chart.selectAll("rect")
.data(pointData)
.transition()
.duration(500)
.attr("x", rectX)
.attr("width", rectWidth);
chart.selectAll("text")
.data(pointData)
.transition()
.duration(500)
.text(String);
}