<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="d3/d3.js"></script>
<script src="jquery-2.1.4.min.js"></script>
<script src="jquery-ui.min.js"></script>
</head>
<body>
<svg id="visualisation1" class='visualisation1' width="500" height="250" ></svg>
<script>
myArray1=[10,20,30,40];
MinY=0;MaxY=100;nb_Periodes=4;
var vis2 = d3.select("#visualisation1" ),
WIDTH = 500,
HEIGHT = 250,
MARGINS = {
top: 40,
right: 20,
bottom: 20,
left: 60
},
xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([0,nb_Periodes]),
yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([MinY,MaxY]),
xAxis = d3.svg.axis()
.scale(xScale)
.ticks(16),
yAxis = d3.svg.axis()
.scale(yScale)
.orient("left" );
vis2.selectAll("*" ).remove(); /* nettoyage ancien graphique */
vis2.append("svg:g" )
.attr("class", "x axis" )
.attr("transform", "translate(0," + yScale(0) + " )" )
.call(xAxis);
vis2.append("svg:g" )
.attr("class", "y axis" )
.attr("transform", "translate(" + (MARGINS.left) + ",0)" )
.call(yAxis);
var barPadding=0;
vis2.selectAll("rect" )
.data(myArray1)
.enter()
.append("rect" )
.attr("x", function(d, i) {
return i * ((WIDTH-MARGINS.left-MARGINS.right) / myArray1.length)+MARGINS.left;
})
.attr("y", function(d) {
return yScale(70);
})
.attr("width", (WIDTH-MARGINS.left-MARGINS.right) / myArray1.length - barPadding)
.attr("height", function(d) {
return HEIGHT-MARGINS.top-yScale(50);
})
.attr("fill", "red" )
.attr("stroke","red" );
vis2.selectAll("rect" )
.data(myArray1)
.enter()
.append("rect" )
.attr("x", function(d, i) {
return i * ((WIDTH-MARGINS.left-MARGINS.right) / myArray1.length)+MARGINS.left;
})
.attr("y", function(d) {
return yScale(50);
})
.attr("width", (WIDTH-MARGINS.left-MARGINS.right) / myArray1.length - barPadding)
.attr("height", function(d) {
return HEIGHT-MARGINS.top-yScale(20);
})
.attr("fill", "mediumpurple" )
.attr("stroke","mediumpurple" );
vis2.select("rect" )
.data(myArray1)
.enter()
.append("rect" )
.attr("x", function(d, i) {
return i * ((WIDTH-MARGINS.left-MARGINS.right) / myArray1.length)+MARGINS.left;
})
.attr("y", function(d) {
return yScale(20);
})
.attr("width", (WIDTH-MARGINS.left-MARGINS.right) / myArray1.length - barPadding)
.attr("height", function(d) {
return HEIGHT-MARGINS.top-yScale(10);
})
.attr("fill", "blue" )
.attr("stroke","blue" );
</script>
</body>
</html>
|
