Rectangles empilés avec D3.js

**Bok78** · 28/10/2015, 15h01

Bonjour,
J'utilise D3.js pour dessiner des rectangles empilés dans des SVG.

Voici le code de ma page :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<!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>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
			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");

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
		</script>
    </body>
</html>

Le problème est qu'il ne dessine que la première série de rectangles.
une idée ?
Merci.

Sinon si quelqu'un a compris quelle fonction il fallait envoyer en paramètre à d3.layout.stack je suis preneur ...

**NoSmoking** · 29/10/2015, 14h00

Bonjour,
dans ton code il te faut recréer des <g> pour y mettre tes <rect>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
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.append("svg:g")
   .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");

**Bok78** · 29/10/2015, 14h33

C'est bon cela fonctionne !

Merci beaucoup.

Rectangles empilés avec D3.js

JavaScript

Discussions similaires

Partager

Partager