根据D3可视化的另一个对象，按值按特定顺序对对象数组进行排序

Question

我有一个包含颜色的对象数组。我需要按颜色按特定顺序对数组进行排序。

我使用answer from stackoverflow按照特定的顺序对数组进行排序，它基本上起到了作用。我现在面临的问题是，当我使用D3Js将其可视化时，而不是将所有具有匹配颜色的对象组合在一起，而是以指定的顺序重复颜色。为什么会发生这种情况?我如何才能获得正确的排序。

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

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

完整代码为here

​

​

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

Infinitys会将任何未找到的内容移到列表的末尾，我们需要找到+1s以避免执行0 || Infinity。