Search code examples
javascriptd3.jsdc.jscrossfilter

How can I apply a custom (defined) order to the rows of a row chart in DC.js?


I have a rowchart that currently looks like this:

deltaChart
    .width(300)
    .height(250)
    .dimension(deltaDim)
    .group(pointsByDelta)
    .xAxis().ticks(4);

In which the deltaDim dimension is comprised of 11 or so unique string values, pointsByDelta represents related counts, and deltaChart is of type rowChart.

Since the deltaDim values are string and not numeric, the sorting is out of order. I've tried applying what I've found in the wiki as well as on other's posts here to manually reorder, with no luck at all. Regardless of the format I receive a console error: .ordering is not a function()

I've tried just simple ordering like this:

.ordering(function(d){return -d.value})

That results in error. Ideally I'd like to be able to do something like:

.ordering(function(d) {
        if(d.value == "5 ft") return 0;
        else if(d.value == "4 ft") return 1;
        else if(d.value == "3 ft") return 2;
        else if(d.value == "2 ft") return 3;
        else if(d.value == "1 ft") return 4;
        else if(d.value == "0 ft") return 5;
        else if(d.value == "-1 ft") return 6;
        else if(d.value == "-2 ft") return 7;
        else if(d.value == "-3 ft") return 8;
        else if(d.value == "-4 ft") return 9;
        else if(d.value == "-5 ft") return 10;
        else return 11;
    })

It looks like most of the posts on this topic are responded to with a way to sort in ascending or descending order. I've not even been able to get that to behave, and in my case, I need to be able to dictate the order if possible.

Any help appreciated. Thank you!


Solution

  • Combined with Gordon's input from above regarding .xAxis(), the solution that works is as follows.

    deltaChart
        .width(300)
        .height(250)
        .dimension(bfeDeltaDim)
        .group(pointsByBFEDelta)
        .ordering(function(d) {
            if(d.key == "5 ft") return 0;
            else if(d.key == "4 ft") return 1;
            else if(d.key == "3 ft") return 2;
            else if(d.key == "2 ft") return 3;
            else if(d.key == "1 ft") return 4;
            else if(d.key == "0 ft") return 5;
            else if(d.key == "-1 ft") return 6;
            else if(d.key == "-2 ft") return 7;
            else if(d.key == "-3 ft") return 8;
            else if(d.key == "-4 ft") return 9;
            else if(d.key == "-5 ft") return 10;
            else return 11;
        })
        .xAxis().ticks(4);