Question

我尝试使用下面的代码根据下面提供的json中 val 的计数显示前3个值。

yearRingChart.width(300).height(300).dimension(yearDim).group(
                spendPertime).innerRadius(50).controlsUseVisibility(true)
                .data(function(d) {
                return d.order(
                 function(d) {
                    return d.val;
                }).top(3);
            }).ordering(function(d) {
                return -d.val;
            });

但这是根据字母顺序而不是 val 进行排序的。我需要在提供的json中显示val值最高的前3个名称。

下面提供了代码段-

var yearRingChart = dc.pieChart("#chart-ring-year"), 
        spendHistChart = dc.barChart("#chart-hist-spend"), 
        spenderRowChart = dc.rowChart("#chart-row-spenders");                               
        var table = dc.dataTable('#table');
        // use static or load via d3.csv("spendData.csv", function(error, spendData) {/* do stuff */});
        var spendData = [{
            Name : 'A',
            val : '100',
            time : 9,
            place : 'Kolkata'
        }, {
            Name : 'B',
            val : '40',
            time : 10,
            place : 'Angalore'
        }, {
            Name : 'C',
            val : '5',
            time : 11,
            place : 'Raipur'

        }, {
            Name : 'A',
            val : '70',
            time : 12,
            place : 'Chennai'
        }, {
            Name : 'B',
            val : '20',
            time : 10,
            place : 'Mumbai'
        }];
        // normalize/parse data
        spendData.forEach(function(d) {         
            d.val = d.val.match(/\d+/)[0];
        });
        // set crossfilter
        var ndx = crossfilter(spendData), yearDim =
ndx.dimension(function(
                d) {
            return d.place;
        }), spendDim = ndx.dimension(function(d) {
            return Math.floor(d.val / 10);
        }), nameDim = ndx.dimension(function(d) {
            return d.Name;

        }), spendPertime = yearDim.group().reduceSum(function(d) {
            return +d.val;
        })
        , spendPerSev = yearDim.group().reduceSum(function(d) {
            return +d.val;
        }), spendPerName = nameDim.group().reduceSum(function(d) {

            return +d.val;


        }), spendHist = spendDim.group().reduceCount();


        yearRingChart.width(300).height(300).dimension(yearDim).group(
                spendPertime).innerRadius(50).controlsUseVisibility(true)
                .data(function(d) {
                return d.order(
                 function(d) {
                    return d.val;
                }).top(3);
            }).ordering(function(d) {
                return -d.ue;
            });

我是dc.js的新手。任何帮助将不胜感激。谢谢

Answer 1

我怀疑您遇到的最大问题是.ordering()-这是正确的处理方法-需要组数据，而不是原始数据。使用组汇总数据后，您将拥有{key,value}对数组，而不是原始的数据数组。

因此，我认为当您尝试阅读d.val或d.ue时，您只会得到undefined，这将导致没有排序。您可以通过在console.log回调中放置一个断点或ordering来验证这一点。当我有一个运行示例时，这就是我通常调试这类事情的方式。

group.order不会有太大影响，所以我建议删除它。

我还建议您使用.cap()来代替您拥有的看起来很复杂/精巧的复杂数据顺序的东西。上限是饼图和行图的内置功能。</ p>

根据计数而不是字母dc.js显示前n个值

1 个答案: