我很想在stackoverflow上发布一个问题,所以非常感谢任何指导!
我使用crossfilter.js和dc.js绘制图表(两者都相当新)。其中一个要求是seriesChart(散点图)。注意:我使用的是最新的测试版,因为散点图是一项要求,最新的稳定版本似乎不支持seriesChart&散点图。当我过滤/缩放时,这个特殊的图表给我带来了一个问题。这样做时我在控制台中看到以下错误:
未捕获的TypeError:dimension.filterFunction不是函数...
PriceVsTime = dc.seriesChart("#PriceVsTime");
//$('#PriceVsTime').parent('td').addClass('tdOrders1');
PriceVsTimeDimension = crossfilterData.dimension(function (d) { if (d.chart_price > 0) return d.start_datetime; });
PriceVsTimeGroup = PriceVsTimeDimension.group().reduce(
function reduceAdd(p, v) {
++p.count;
p.order_type = v.order_type;
p.execution_type = v.execution_type == 'REPLACED' ? (v.change_qty > 0 ? 'UPSIZE' : 'DOWNSIZE') : v.execution_type;
p.chart_price = v.chart_price;
return p;
},
function reduceRemove(p, v) {
--p.count;
return p;
},
function reduceInitial() {
return { count: 0 };
}
);
var symbolScale = d3.scale.ordinal().range(d3.svg.symbolTypes);
console.log(d3.svg.symbolTypes);
var symbolAccessor = function (d) {
switch (d.value.execution_type) {
case 'NEW':
return d3.svg.symbolTypes[1]; // diamond
case 'CANCELED':
return d3.svg.symbolTypes[0]; // cross
case 'UPSIZE':
return d3.svg.symbolTypes[4]; // triangle-up
case 'DOWNSIZE':
return d3.svg.symbolTypes[5]; // triangle-down
default:
return d3.svg.symbolTypes[3];
}
};
var subChart = function (c) {
return dc.scatterPlot(c)
.existenceAccessor(function (d) { if (d.value.count > 0) { return d.value.execution_type; } })
.symbol(symbolAccessor)
.symbolSize(8)
.highlightedSize(12)
;
};
var PriceVsTimeSeries = function (d) { if (d.value.count > 0) { return d.value.execution_type; } };
var PriceVsTimeKey = function (d) { if (d.value.count > 0) { return d.key; } };
var PriceVsTimeValue = function (d) { if (d.value.count > 0) { return d.value.chart_price; } };
var yPriceVsTime = roundAxis(d3.extent(PriceVsTimeGroup.all(), function (d) { if (d.value.chart_price > 0) { return d.value.chart_price; } }), 10);
function roundAxis(item, interval) {
return [item[0] - item[0] % interval - interval, item[1] - item[1] % interval + interval];
}
PriceVsTime
.chart(subChart)
.width(2 * width1)
.height(height3)
.dimension(PriceVsTimeDimension)
.group(PriceVsTimeGroup)
.seriesAccessor(PriceVsTimeSeries)
.keyAccessor(PriceVsTimeKey)
.valueAccessor(PriceVsTimeValue)
.x(d3.time.scale().domain(DateTimeDomain))
.y(d3.scale.linear().domain(yPriceVsTime))
.yAxisLabel('Price')
.xAxisLabel('Time')
.margins(margin1)
;
PriceVsTime.yAxis().tickFormat(d3.format('s'));
PriceVsTime.brushOn(true).mouseZoomable(true);
PriceVsTime.legend(dc.legend().x(1075).y(0).itemHeight(13).gap(5).horizontal(false).itemWidth(100));