D3 diagramme à barres empilé inhabituel

Question

J'ai besoin de faire un graphique à barres empilé inhabituelle et acutally, je n'ai aucune idée réelle de la façon de le faire.

En général, il semble vraiment facile:

Je dispose d'un fichier CSV avec des valeurs différentes qui peuvent être soit int ou une chaîne. Chaque rangée a le même nombre de valeurs.

J'ai besoin maintenant de faire un graphique à barres empilées qui effectue les opérations suivantes:

barre pour chaque -One colonne colonne -Chaque doit avoir la même hauteur (cause même quantité d'entrées pour chaque colonne) et CHAQUE barre doit avoir une quantité différente de piles, une pile pour chaque valeur différente qui existe. (Plus souvent une valeur existe, plus cette pile devrait être)

Un exemple de fichier CSV serait:

Day, Value 
Mo, 5 
Mo, 3 
Tu, 5 
Tu, 6 

Donc, pour la ligne de jour je besoin de 2 piles la même hauteur et pour la ligne de valeur 3 piles où l'un est 1/2 hauteur et les deux autres 1/4 chacun.

Et c'est le problème que j'ai. Chaque exemple que je peux trouver sur Internet fonctionne avec la même quantité de piles pour chaque barre. (Par exemple: https://bl.ocks.org/mbostock/3886394 ou https://bl.ocks.org/mbostock/1134768)

Des sugestions comment je peux résoudre ce problème?

Answer 1

Vous devez gérer chaque colonne comme une pile distincte et les positionner dans votre graphique. Ce violon: https://jsfiddle.net/gwhn1sgv/2/ montre comment.

Les données pour i. e. la première colonne besoin d'être transformé en un histogramme comme celui-ci:

var column = 'Day'; 
var histo = { Mo: 2, Tu: 2 } 

Ensuite, vous pouvez empiler et de les transformer:

var keys = Object.keys(histo); 
var stack = d3.stack() 
    .keys(keys)([histo]) 
    //unpack the column 
    .map((d, i) => { 
    return {key: keys[i], data: d[0]} 
    }); 

ils ressemblent à ceci:

var stack = [ 
    { key: 'Mo', data: [0, 2] }, 
    { key: 'Tu', data: [2, 4] } 
] 

Si vous avoir une échelle de bande

var x = d3.scaleBand() 
    .domain(data.columns); 

vous pouvez construire la colonne graphique à barres à x(column):