Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Shop Recherche
2022 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  [D3.JS] Fonction d3.layout.stack

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[D3.JS] Fonction d3.layout.stack

n°2268589
HFR_GLT
Posté le 27-10-2015 à 15:27:32  profilanswer
 

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.
 
 

mood
Publicité
Posté le 27-10-2015 à 15:27:32  profilanswer
 

n°2268713
HFR_GLT
Posté le 28-10-2015 à 14:46:58  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  [D3.JS] Fonction d3.layout.stack

 

Sujets relatifs
[Resolu  ]Stack over flow : calcul avec long_long_floatfonction Si imbrique exel
Architecture en D3 JS (detection collision)[Ada][Resolu]Ambiguïté à l'appel d'une fonction en POO
[C++11] fonction renvoyant une reference sur un tableau de 10 string[VBA] Créer une fonction "Recherche", "Bug liste déroulante" ...
d3.js : filtrer X dernières données d'un .csvListe utilisateur AD fonction de plusieurs criteres
Menu externe avec fonction include et class:active 
Plus de sujets relatifs à : [D3.JS] Fonction d3.layout.stack


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR