queryAutoVizInfEng/bar2.php at master · WebDataScience/queryAutoVizInfEng · GitHub

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
106
107
108
<div id="chart"></div>
<div id="bars"></div>

 <style>
	.bar_chart rect {
		stroke: white;
		fill: steelBlue;
	}
	.bar_chart text {
		color: white;
		font: 10px sans-serif;
	}
	#module_2 {
		float: right;
	}
</style>


<script>

	bar_chart("220","400",data,"1")();


	function bar_chart(height,width,data,mod) {
	 var height = 220,
	 width = 400;

	 function my() {
	 var bar_chart = d3.select("body").append("svg")
	 .attr("id", "mod-"+mod+"-bar-chart")
	 .attr("class", "bar_chart")
	 .attr("width", width)
	 .attr("height", height)
	 .append("g")
	 .attr("transform", "translate(10,15)")

	 var x = d3.scale.linear()
	 .domain([0, d3.max("x", function(d) { return d.value; } )])
	 .range([0, 420]);
	 console.log("x: " + x[0]);
	 var y = d3.scale.ordinal()
	 .domain([9])
	 .rangeBands([0, 120]);

	 bar_chart.selectAll("line")
	 .data(x.ticks(10))
	 .enter().append("line")
	 .attr("x1", x)
	 .attr("x2", x)
	 .attr("y1", 0)
	 .attr("y2", 120)
	 .style("stroke", "#ccc");
	 bar_chart.selectAll("rect")
	 .data(data)
	 .enter().append("rect")
	 .attr("y", y)
	 .attr("width", x)
	 .attr("height", y.rangeBand());
	 /*
	 bar_chart.selectAll("text")
	 .data(function(d) { metric1(ret)
	 .enter().append("text")
	 .attr("x", x)
	 .attr("y", function(d) { return y(d) + y.rangeBand() / 2; })
	 .attr("dx", -3) // padding-right
	 .attr("dy", ".35em") // vertical-align: middle
	 .attr("text-anchor", "end") // text-align: right
	 .attr("fill","white")
	 .text(String);
	 */
	 bar_chart.append("line")
	 .attr("y1", 0)
	 .attr("y2", 120)
	 .style("stroke", "#000");

	 bar_chart.selectAll(".rule")
	 .data(x.ticks(10))
	 .enter().append("text")
	 .attr("class", "rule")
	 .attr("x", x)
	 .attr("y", 0)
	 .attr("dy", -3)
	 .attr("text-anchor", "middle")
	 .text(String);
	 }

	 my.width = function(value) {
	 if (!arguments.length) return width;
	 width = value;
	 return my;
	 };

	 my.height = function(value) {
	 if (!arguments.length) return height;
	 height = value;
	 return my;
	 };

	 my.data = function(value) {
	 if (!arguments.length) return data;
	 data = value;
	 return my;
	 }

	 return my;
	 }
 </script>