javascript - 尝试在 dc.js 中制作气泡图，其中 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

请告诉我们结果如何!