Сортировка массива объекта по значению в определенном порядке на основе другого объекта для визуализации D3

Question

У меня есть массив объектов, содержащих цвета.Мне нужно отсортировать массив по цвету в определенном порядке.

Я использовал ответ из stackoverflow , чтобы отсортировать массив в определенном порядке, и он в основном работал.Проблема, с которой я сталкиваюсь сейчас, заключается в том, что когда я визуализирую это с помощью D3J, вместо того, чтобы объединять все объекты с совпадающими цветами вместе, происходит повторение цветов в указанном порядке.Почему это происходит и как я могу получить правильную сортировку.

    var sortOrder = {"#F39849": 0, "#E94927": 1, "#538296": 2, "#CCCCCC": 3};

    var sortedData = data.sort(function (p1, p2) {
      return sortOrder[p1.colors] - sortOrder[p2.colors];
    });

полный код здесь

Answer 1

Я предполагаю, что это связано со значениями в ваших данных, которые не имеют атрибутов colors. Я вижу, по крайней мере, несколько из них.

Если вы обрабатывали неизвестные значения, скажите

    var sortOrder = {"#F39849": 0, "#E94927": 1, "#538296": 2, "#CCCCCC": 3, "unknown" : 100};

и

    return sortOrder[p1.colors || 'unknown'] - sortOrder[p2.colors || 'unknown'];

Скорее всего, будет работать.

Возможно, вы захотите обработать случай, когда colors найден, но отсутствует в вашем списке, что, вероятно, можно обработать с помощью

return ((sortOrder[p1.colors || 'unknown'] + 1) || Infinity) - 
       ((sortOrder[p2.colors || 'unknown'] + 1) || Infinity);

Infinity s должны переместить все не найденные в конец списка, и нам нужно +1 s, чтобы избежать выполнения 0 || Infinity.