过滤dc.seriesChart

时间:2016-12-16 18:18:49

标签: d3.js dc.js crossfilter

我很想在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));

0 个答案:

没有答案