javascript - D3 根据 2 个对象属性对对象数组进行排序

Question

我有一个包含 4 个对象属性的对象数组的数据集，如下所示:

var dataset = [{
    key: 0,
    brand: "A",
    value: 10,
    size: 10
}, {
    key: 1,
    brand: "B",
    value: 11,
    size: 10
}, {
    key: 2,
    brand: "C",
    value: 12,
    size: 9
}, {
    key: 3,
    brand: "D",
    value: 13,
    size: 9
}, {
    key: 4,
    brand: "E",
    value: 14,
    size: 9
}, {
    key: 5,
    brand: "G",
    value: 15,
    size: 9
}, {
    key: 6,
    brand: "F",
    value: 16,
    size: 9
}, {
    key: 7,
    brand: "H",
    value: 17,
    size: 9
}, {
    key: 8,
    brand: "I",
    value: 18,
    size: 9
}, {
    key: 9,
    brand: "J",
    value: 19,
    size: 9
}, {
    key: 10,
    brand: "K",
    value: 20,
    size: 9
}];

然后我用 D3 构建了一个图表，将 value 显示为水平线，将 size 显示为位于线顶部的气泡(请参阅 http://jsfiddle.net/G74Aq/4/)。

除了 key 属性外，我还为上述每个对象属性添加了一个排序函数，该属性用于排序中的键函数。这在按名称和按值排序时效果很好，但当我按大小排序时，线条和气泡的排序方式不同。请注意，只有当键值达到 10 时才会发生这种情况，这表明存在字典排序问题，我认为我可以通过在 <10 以下的每个键值前面添加 0 来绕过这个问题(这没有改变任何东西)。

我的问题是:为什么不同的元素以不同的方式排序，即使应用的排序方法都使用相同的键函数？当然，我如何对齐排序函数？

Answer 1

尝试强制它按数值而不是字符串排序。一元 + 运算符可以实现这一点。

function getSortFunction(propertyName) {
    return function(a, b) {
        return +(a[propertyName]) > +(b[propertyName]);
    }
}

dataset.sort(getSortFunction("size"));