Question

我有一个行图，目前看起来像这样：

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

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

由于deltaDim值是字符串而不是数字，因此排序无序。我已尝试将我在维基中找到的内容以及此处的其他帖子应用于手动重新排序，完全没有运气。无论我收到控制台错误的格式如何：.ordering不是函数（）

我尝试过这样的简单订购：

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

看起来大多数关于此主题的帖子都会以升序或降序排序的方式进行响应。我甚至没有能够做到这一点，在我的情况下，我需要能够在可能的情况下决定命令。

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

Answer 1

如果字符串就像它们在上面那么你可以在函数中使用它们的分割：

split（）方法将String对象拆分为字符串数组将字符串分成子串。

将字符串拆分为字符串中的空格，然后返回数组中的第一个项目然后解析这个项目，它将是5到-5到一个int

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

可以使用dc.js查看此.ordering() - 但仅限于此直流对象 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

Answer 2

您确定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);

Answer 3

结合戈登关于.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);

Answer 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

如何将自定义（已定义）订单应用于DC.js中行图的行？

4 个答案: