javascript - 如何将自定义(定义的)顺序应用于 DC.js 中的行图表的行?

标签 javascript d3.js dc.js crossfilter

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

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

看起来大多数关于此主题的帖子都以升序或降序排序的方式回复。我什至无法让它正常运行,就我而言,如果可能的话,我需要能够决定顺序。

感谢任何帮助。谢谢!

最佳答案

你确定 d3.js 有一个 .ordering()方法?也许您正在寻找旧的.sort() .问题是在遍历数组时必须替换单位“ft”,我们可以使用正则表达式模式 \s+ft$删除它。该模式与术语 <any_amount_of_space>ft 相匹配在字符串的末尾。替换后,只需将其转换为 float 即可。我避免使用 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);

关于javascript - 如何将自定义(定义的)顺序应用于 DC.js 中的行图表的行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40248917/

相关文章:

JavaScript/ThreeJS 类型错误 : Cannot read property 'set' of undefined

javascript - d3.js 网格在拖动和缩放时四处移动

javascript - 使用 d3 域调用更改 dc 直方图的存储桶

javascript - 在mapbox-gl-js中,是否可以让 map 的中心不是 Canvas 的中心?

返回 TypeError : Value not an object 的 Javascript removeChild 函数

javascript - 如何在点上应用渐变蒙版

javascript - 使用 d3 提示的关闭问题

charts - dc.js onClick 监听器不工作

javascript - d3/dc.js - 如何创建堆叠条形图,同时告诉 crossfilter 将数组中的元素视为单独的记录?

javascript - Laravel 路由的 Javascript 中的全局变量 - 这是个好主意吗?