Попытка сделать пузырьковую диаграмму в dc.js со значениями String в оси X

Question

Я пытаюсь сделать пузырьковую диаграмму в dc.js. Должно отображаться общее количество по типу товара. Таким образом, ось y имеет домен чисел, а ось x имеет домен строковых значений. Эти строковые значения заранее неизвестны, вместо этого они взяты из базы данных, поэтому я не знаю, как определить домен x.

Вот мой код

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

Интересно - большинство людей используют гистограммы для подсчета порядковых значений. Я не уверен, что этот вариант использования для пузырьковых диаграмм был полностью изучен, но он должен работать, так как поддержка порядковой шкалы x находится на уровне смешанных координатных сеток.

Ты захочешь хотя бы

.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

Пожалуйста, дайте нам знать, как это получается!