DC.js

Question

请原谅我的英文。

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

我的数据是这样的:

    [{"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},]

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

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 ..."

感谢任何帮助。谢谢！

Answer 1

欢迎来到 Stack Overflow。为了将来参考，如果您可以包含一个可重现的示例（例如 jsFiddle），它会有所帮助。

因为我写了序号刷的例子，所以我明白你在做什么，但是你没有把所有的代码都包括进去，所以别人看不清楚。

这里是一个fiddle with complete 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() 创建一个按排序函数排序的假组。现在它按值从高到低排序：

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

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

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

这会将每个键按 / 拆分，然后取第一项 ([0])，然后将其转换为数字 (+)，然后再使用 d3.ascending指定从低到高排序。

结果：

和a working version of the fiddle.

DC.js - 顺序刻度折线图的自定义排序

DC.js - Custom ordering of ordinal scale line chart

d3.js

crossfilter