[D3.JS] Fonction d3.layout.stack

Fonction d3.layout.stack [D3.JS] - Javascript/Node.js - Programmation

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

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed