[D3.JS] Fonction d3.layout.stack

Marsh Posté le 27-10-2015 à 15:27:32

Hello
Un petit soucis avec D3.js et la fonction d3.layout.stack.

J'ai des données qui sont sous la forme d'un tableau :
tableau[x].pommes =...
tableau[x].bananes = ...
tableau[x].endives = ...
...

Je souhaiterais afficher un graphique avec ces données empilées mais je ne veux empiler que les pommes et les bananes ...
Je n'arrive pas à comprendre comment écrire la fonction à passer en paramètre à d3.layout.stack() pour que cela fonctionne.

Une idée ?

Merci.

Reply

Marsh Posté le 27-10-2015 à 15:27:32

Reply

Marsh Posté le 28-10-2015 à 14:46:58

Hello,
J'ai pas trouvé comment fonctionne la fonction d3.layout.stack résultat je me suis décidé à faire mes rectangles moi-même

<!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>

Le problème est qu'il ne me dessine que la première série de rectangle ( en rouge ) et pas les autres
Une idée ?
Merci

Reply

[D3.JS] Fonction d3.layout.stack

Sujets relatifs:

Leave a Replay