在 dc.js 中具有两个序数刻度的气泡图

Question

我想使用带有两个序数轴的 dc.js 创建一个 bubbleChart。当我尝试它时，我所有的气泡最终都在 Y 轴的顶部，并且 Y 轴似乎不是有序的。

有没有办法正确地做到这一点？

这是我对bubbleChart 的配置：

.dimension(dims.currencyinstrument)
.group(groups.currencyinstrument.pnlSum)
.keyAccessor(function(d) {
        return d.key.split("~")[0]
    })
.valueAccessor(function(d) {
        return d.key.split("~")[1]
    })
.radiusValueAccessor(function(d) {
        return Math.abs(d.value)
    })
.x(d3.scale.ordinal().domain(groups.currencyinstrument.pnlSum.all().map(function(d) {return(d.key.split("~")[0])}).unshift("")))
.y(d3.scale.ordinal().domain(groups.currencyinstrument.pnlSum.all().map(function(d) {return(d.key.split("~")[1])}).unshift("")))
.r(d3.scale.linear().domain([0,groups.currencyinstrument.pnlSum.all().map(function(d) {return(Math.abs(d.value))}).sort(function(a,b){return(b-a)})[0]]))

编辑：这是fiddle。从 GitHub 加载数据需要一段时间（约 1 分钟），但这一切都是值得的！

Answer 1

简而言之，coordinateGridMixin 目前不支持序数 Y 刻度。

通过删除 elasticY 并覆盖 _prepareYAxis 以更改它指定的错误范围，我至少能够在这个小提琴中显示它：

dc.override(pnlPerCurrencyInstrumentTypebubbleChart, "_prepareYAxis", function(g) {
    this.__prepareYAxis(g);
    this.y().rangeBands([this.yAxisHeight(), 0])
});

http://jsfiddle.net/gordonwoodhull/xZFx4/10/

希望您可以开始使用它。我提交了这个错误来跟踪问题：

https://github.com/dc-js/dc.js/issues/539

编辑：仔细观察，我猜 rangePoints 而不是 rangeBands 在这里会更合适......猜想 coordinateGridMixin 需要有一个自定义点，以便条形图和散点图可以指定不同的行为。