如何将自定义（定义）顺序应用于 DC.js 中的行图的行？答案

【问题标题】：How can I apply a custom (defined) order to the rows of a row chart in DC.js?如何将自定义（定义）顺序应用于 DC.js 中的行图的行？
【发布时间】：2016-10-25 20:13:55
【问题描述】：

我有一个当前看起来像这样的行图：

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

其中deltaDim 维度由11 个左右的唯一字符串值组成，pointsByDelta 表示相关计数，deltaChart 是 rowChart 类型。

由于deltaDim 值是字符串而不是数字，因此排序是无序的。我已经尝试应用我在 wiki 以及其他帖子中找到的内容来手动重新排序，但完全没有运气。无论格式如何，我都会收到控制台错误：.ordering is not a function()

我尝试过像这样的简单排序：

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

这会导致错误。理想情况下，我希望能够执行以下操作：

.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;
    })

看起来这个主题的大多数帖子都以升序或降序排序的方式得到回应。我什至无法让它表现出来，就我而言，如果可能的话，我需要能够指示顺序。

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

【问题讨论】：

不确定人们为什么要回答有关 String 的问题，这离基地很远。也许您正在使用不支持此功能的真正旧版本的 dc.js？它是在 1.5 或 1.6 中引入的。您在上面显示的内容应该可以工作。
戈登，谢谢你的来信。我加倍检查，我使用的是 1.6。从我看到的其他示例中，我认为它看起来应该可以工作......我真的很想知道为什么我会收到错误，即使是不太复杂的排序。
嗯，你是不是想打电话给.ordering(...) after a call to .xAxis(...)？如果你得到“.ordering 不是一个函数”，这意味着它要么不存在，要么你没有使用图表对象——你尝试传递给它什么都没关系。
肯定是图表对象，例如：var deltaChart = dc.rowChart("#bfeDelta-chart"); 那么bfeDeltaChart .width(300) .height(250) .dimension(bfeDeltaDim) .group(pointsByBFEDelta) .xAxis().ticks(4) .ordering(function(d){return +d.value});
请查看我在上面发布的常见问题解答链接。使用.xAxis() 将返回一个不是图表的不同对象。

标签： javascript d3.js dc.js crossfilter

【解决方案1】：

你确定 d3.js 有一个.ordering() 方法吗？也许您正在寻找旧的.sort()。问题是您必须在遍历数组时替换单位“ft”，我们可以使用正则表达式模式\s+ft$ 来删除它。该模式与字符串末尾的术语<any_amount_of_space>ft 匹配。替换后，只需将其转换为浮点数。我避免使用parseInt()，因为您可能有非整数值。

var arr = ["5 ft", "4 ft", "3 ft", "2 ft", "1 ft", "0 ft", "-1 ft", "-2 ft", "-3 ft", "-4 ft", "-5 ft"];

var arr_sorted = arr.sort(function(a, b) {
  // Convert to float
  var x = parseFloat(a.replace(/\s+ft$/, "")),
      y = parseFloat(b.replace(/\s+ft$/, ""));

  // Return, sort by descending order
  return ((x < y) ? 1 : ((x > y) ? -1 : 0));

  // If ascending order is needed, use:
  // return ((x > y) ? 1 : ((x < y) ? -1 : 0));
});
console.log(arr_sorted);

【讨论】：

【解决方案2】：

如果字符串与上面一样，您可以在函数中使用它们。
拆分：

split() 方法将一个 String 对象拆分为一个字符串数组将字符串分成子字符串。

用字符串中的空格分割字符串，然后返回数组中的第一项
然后解析这个item，将5到-5变成一个int

.ordering(function(d){  
     return parseInt(d.split(" ")[0]);  
 })

查看此.ordering() 可用于 dc.js - 但仅限于直流对象 https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#orderingorderfunction
d3 v3 sort() - https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#sort

【讨论】：

【解决方案3】：

结合上面 Gordon 关于 .xAxis() 的输入，可行的解决方案如下。

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);

【讨论】：

【解决方案4】：

最好避免冗长的 if else 条件。这可以通过d3 scales轻松处理

使用首选顺序创建有序尺度和域。

范围可以通过排序顺序与索引完成

var scale = d3.scale.ordinal()
.domain(['C','B','A'])
.range([0,1,2]);

在订购功能中

chart.ordering(function(k){
  return scale(k.key);
})

jsFiddle Working copy

【讨论】：