Essayer de créer un graphique à bulles dans dc.js avec des valeurs de chaîne dans l'axe des x

Question

J'essaie de créer un graphique à bulles dans dc.js. Il devrait montrer la quantité totale par type d'article. Ainsi, l'axe y a le domaine des nombres et l'axe x a le domaine des valeurs de chaîne. Ces valeurs de chaîne ne sont pas connues à l'avance, elles sont plutôt extraites d'une base de données, donc je ne sais pas comment définir le x domaine.

Voici mon code

var itemChart = dc.bubbleChart('#item-chart'); 

//the data 
var data = [{ 
    date: "2015-01-01", 
    itemType: "bags", 
    quantity: 3 
}]; 


var items = crossfilter(data); 

var parseDate = d3.time.format("%Y-%m-%d").parse; 
data.forEach(function (d) { 
    d.date = parseDate(d.date); 
    d.month = d.date.getMonth(); 
    d.year = d.date.getFullYear(); 
    //d.day = ((d.date.getFullYear() == 0) ? 'Sunday' : ((d.date.getFullYear() == 1) ? 'Monday' : ((d.date.getFullYear() == 2) ? 'Tuesday' : ((d.date.getFullYear() == 3) ? 'Wednesday' : ((d.date.getFullYear() == 4) ? 'Thursday' : ((d.date.getFullYear() == 5) ? 'Friday' : 'Sunday')))))); 
    d.itemType = d.itemType; 
    d.quantity = +d.quantity; 
}); 

var itemTypeDim = items.dimension(function (d) { 
    return d.itemType; 
}); 

var itemTypeProd = itemTypeDim.group().reduceSum(function(d) { 
    return d.quantity; 
}); 

var prod = yearDim.group().reduceSum(function (d) { 
    return d.quantity; 
}); 

var rangeVal = [-10, d3.max(itemTypeProd.all(), function(d) { return d.value.quantity; }) ]; 

itemChart 
    .width(990) 
    .height(250) 
    .transitionDuration(1500) 
    .margins({top: 10, right: 50, bottom: 30, left: 40}) 
    .dimension(itemTypeDim) 
    .group(itemTypeProd); 

    .keyAccessor(function (d){ 
     return d.value.itemType; 
    }) 
    .valueAccessor(function (d){ 
     return d.value.quantity; 
    }) 
    .radiusValueAccessor(function (d){ 
     return d.value.quantity; 
    }) 
    .maxBubbleRelativeSize(0,3) 
    .elasticX(true) 
    .elasticY(true) 
    .yAxisPadding(100) 
    .xAxisPadding(500) 
    .renderHorizontalGridLines(true) 
    .renderVerticalGridLines(true) 
    .xAxisLabel('Item Type') 
    .yAxisLabel('Total Quantity') 


    .renderLabel(true) 
    .label(function (p) { 
     return p.key; 
    }) 
    .renderTitle(true) 
    .title(function (p){ 
     return [ 
     p.key, 
     'itemType: ' + p.value.customer, 
     'Quantity:' + p.value.quantity 
     ].join('\n'); 
    }); 

dc.renderAll(); 

Answer 1

Intéressant - la plupart des gens utilisent des diagrammes à barres pour le comptage des valeurs ordinales. Je ne suis pas sûr si ce cas d'utilisation pour les graphiques à bulles a été entièrement exploré, mais cela devrait fonctionner puisque le support de l'échelle x ordinale est au niveau de la grille de coordonnées.

Vous voulez au moins

.x(d3.scale.ordinal()) 

https://github.com/dc-js/dc.js/blob/develop/web/docs/api-latest.md#dc.coordinateGridMixin+x https://github.com/mbostock/d3/wiki/Ordinal-Scales

S'il vous plaît faites-nous savoir comment il se trouve!