Как я могу применить пользовательский (определенный) порядок к строкам диаграммы строк в DC.js?

Question

У меня есть rowchart, что в настоящее время выглядит следующим образом:

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

В сочетании с входом Гордона сверху относительно .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 2

Если строки похожи на то, что они выше, вы можете работать с ними в функции.
Разделение:

The split() method splits a String object into an array of strings by separating the string into substrings.

разделить строку на место в строке, а затем возвращает первый элемент в массиве
Затем разобрать этот элемент, который будет составлять от 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

Answer 3

Вы уверены, что 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);

Answer 4

Лучше избегать длительного, если еще условие.Это может быть легко обработано через d3 scales

1. Создайте порядковый масштаб и домен с предпочтительным заказом.

2. Диапазон может быть сделано с помощью индекса по заказу

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

   сортировки В заказе функции

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

jsFiddle Working copy