DC.js-顺序刻度线图的自定义排序 [英] DC.js - Custom ordering of ordinal scale line chart

问题描述

请原谅我的英语.

我正在尝试创建具有序数刻度和笔刷功能的折线图.由于此方法，我成功设置了序数上的笔刷: https://dc-js.github.io/dc. js/examples/brush-ordinal.html 现在，我需要设置x轴值的顺序.

I am trying to create a line chart with ordinal scale and brushon function. I successfully set brushing on ordinal thanks to this method : https://dc-js.github.io/dc.js/examples/brush-ordinal.html And now I need to set the x-axis values order.

我的数据是这样的:

    [{"id_commune":4,"datation":"-30/-20","effectif":0.09,"commune":"Frejus","lieu_dit":"Les Aiguieres","departement":"83","pays":"FR","longitude":6.73703399,"latitude":43.433152,"quantite":1,"id_datation":1},
        {"id_commune":4,"datation":"-20/-10","effectif":0.09,"commune":"Frejus","lieu_dit":"Les Aiguieres","departement":"83","pays":"FR","longitude":6.73703399,"latitude":43.433152,"quantite":1,"id_datation":2},
        {"id_commune":4,"datation":"-10/1","effectif":0.09,"commune":"Frejus","lieu_dit":"Les Aiguieres","departement":"83","pays":"FR","longitude":6.73703399,"latitude":43.433152,"quantite":1,"id_datation":3},
    {"id_commune":7,"datation":"20/30","effectif":0.33,"commune":"Nimes","lieu_dit":"Solignac","departement":"30","pays":"FR","longitude":4.36005399,"latitude":43.836699,"quantite":1,"id_datation":6},{"id_commune":6,"datation":"20\/30","effectif":0.6,"commune":"Muralto","lieu_dit":"Liverpool b","departement":"TI","pays":"CH","longitude":8.80560809,"latitude":46.1729618,"quantite":1,"id_datation":6},
{"id_commune":4,"datation":"20/30","effectif":0.09,"commune":"Frejus","lieu_dit":"Les Aiguieres","departement":"83","pays":"FR","longitude":6.73703399,"latitude":43.433152,"quantite":1,"id_datation":6},{"id_commune":1,"datation":"20/30","effectif":0.14,"commune":"Aislingen","lieu_dit":"NP","departement":"Lkr. Dillingen an der Donau BY","pays":"DE","longitude":10.4559987,"latitude":48.5065603,"quantite":1,"id_datation":6},]

我的交叉过滤器维度和组如下所示:

My crossfilter dimension and group look like this :

var ndx = crossfilter(records)
var graphDim = ndx.dimension(function(d) {return d.datation});
var graphGroup = graphDim.group().reduceSum(function(d) {return d.effectif;});

图表:

lineChart
            .width(950)
            .height(350)
            .margins({top: 10, right: 50, bottom: 35, left: 30})
            .dimension(graphDim)            
            .keyAccessor(function(kv) { return  graphGroup.ord2int(kv.key); })
            .group(graphGroup)
            .x(d3.scaleLinear().domain(linear_domain))
            .xAxisLabel("Chronologie")
            .yAxisLabel("Effectif")
            .brushOn(true)
            .renderArea(true)
            .renderHorizontalGridLines(true)
            .renderVerticalGridLines(true)
            .elasticY(true)
            .yAxis().ticks(4);

现在，我明白了:

我要完成的结果是同一张图表，但x轴刻度值的排序如下: "-30/-20 -20/-10 -10/1 ..."

The result I am trying to accomplish is the same chart but with x-axis ticks values ordered like this : "-30/-20 -20/-10 -10/1 ..."

任何帮助表示赞赏.谢谢！

Any help appreciated. Thank you!

推荐答案

欢迎使用Stack Overflow.供以后参考，如果您可以包括一个可重现的示例(例如jsFiddle)，则将有帮助.

Welcome to Stack Overflow. For future reference, it helps if you can include a reproducible example, for example a jsFiddle.

我理解您在做什么，因为我写了序数刷的示例，但是您没有包含所有代码，因此其他人不清楚.

I understood what you were doing because I wrote the ordinal brushing example, but you didn't include all the code, so it wouldn't be clear to others.

这是一个带有完整代码的小提琴，下面是相关代码:

Here is a fiddle with complete code, and here is the relevant code:

var graphDim = ndx.dimension(function(d) {return d.datation});
var graphGroup = graphDim.group().reduceSum(function(d) {return d.effectif;});        
graphGroup = ordinal_to_linear_group(sort_group(graphGroup, function(a, b) {
        return d3.descending(a.value, b.value);
    }));
    line = dc.lineChart('#line');
    var linear_domain = [-0.5, data.length - 0.5];
    line
        .width(950)
        .height(350)
        .margins({top: 10, right: 50, bottom: 35, left: 30})
        .dimension(graphDim)            
        .keyAccessor(function(kv) { return  graphGroup.ord2int(kv.key); })
        .group(graphGroup)
        .x(d3.scaleLinear().domain(linear_domain))
        .xAxisLabel("Chronologie")
        .yAxisLabel("Effectif")
        .brushOn(true)
        .renderArea(true)
        .renderHorizontalGridLines(true)
        .renderVerticalGridLines(true)
        .elasticY(true)

    line.yAxis().ticks(4);

    line.xAxis()
        .tickValues(d3.range(data.length))
        .tickFormat(function(d) { return graphGroup.int2ord(d); });

这是(不好的)结果:

顾名思义，sort_group()创建一个按订购函数排序的伪造组.现在，它按值排序，从最高到最低:

As its name implies, sort_group() creates a fake group sorted by the ordering function. Right now it's sorting by value, from highest to lowest:

sort_group(graphGroup, function(a, b) {
        return d3.descending(a.value, b.value);
    })

您似乎想按每个键的第一部分的数值排序.您可以相应地更改排序:

It looks like you want to sort by the numeric value of the first part of each key. You can change the sort accordingly:

sort_group(graphGroup, function(a, b) {
        return d3.ascending(+a.key.split('/')[0], +b.key.split('/')[0]);
    })

在使用d3.ascending指定从低到高的排序之前，这会将每个键除以/，然后获取第一项([0])，然后将其转换为数字(+).

This splits each key by /, then takes the first item ([0]), then converts it to a number (+), before using d3.ascending to specify sorting from low to high.

结果:

小提琴的工作版本.

这篇关于DC.js-顺序刻度线图的自定义排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！