/
step3.html
52 lines (47 loc) · 1.72 KB
/
step3.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
<!DOCTYPE html>
<meta charset="utf-8">
<script type="text/javascript" src="scripts/d3.v3.js"></script>
<script type="text/javascript" src="scripts/ICanHaz.min.js" ></script>
<script type="text/javascript" src="scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="scripts/innersvg.js"></script>
<svg width="920" height="0">
<defs>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="15" x2="0" y2="1">
<stop offset="0" style="stop-color:#78D2FF"/>
<stop offset="1" style="stop-color:#24B6FF"/>
</linearGradient>
</defs>
</svg>
<script id="row" type="text/html">
<rect y="1" fill="url(#SVGID_1_)" width="{{width}}" height="14"/>
<g transform="translate({{width}} 0)">
<text transform="translate(-30 13)" fill="#FFFFFF" font-family="'Exo-DemiBold'" font-size="13">{{value}}</text>
<rect x="-5" y="1" fill="#FF2312" width="5" height="14"/>
</g>
<rect y="1" width="2" height="14"/>
<rect y="1" opacity="0.2" fill="#FFFFFF" width="{{width}}" height="6"/>
</script>
<script>
data = [{'value':200}, {'value':100}, {'value':150}, {'value':50}]
var x = d3.scale.linear()
.domain([0, 200])
.range([0, 500]);
var rowHeight = 22;
$(document).ready(function () {
var svg = d3.select('svg')
.attr("height", rowHeight*data.length)
.selectAll('g.dataRow')
.data(data)
.enter()
.append('g')
.attr("class", "dataRow")
.attr('transform', function(d,i) {
return "translate(0," + i*rowHeight + ")";
})
.html(function(d,i) {
d = $.extend(d,
{'width': x(d.value)})
return ich.row(d, true);
});
});
</script>