1

我正在使用 D3.js 并尝试在单击按钮时按升序/降序对条形图进行排序。但是我遇到了让 sortBars 函数从我的对象返回正确值的问题。

var sortOrder = false;
var sortBars = function() {
sortOrder = !sortOrder;
svg.selectAll("rect")
    .sort(function(a, b) {
        if (sortOrder) {
            return d3.ascending(a, b);
        } else {
            return d3.descending(a, b);
        }
    })
    .transition()
    .delay(function(d, i) {
        return i * 50;
    })
    .duration(1000)
    .attr("x", function(d, i) {
        return xScale(i);
    });
};

当它返回xScale(i)时，我知道它没有正确引用我的数据集。我试过把它作为i.value（这是我在我的数据集中命名的）。我知道这是不正确的，但是当我将其更改为那个时，我至少可以让杆移动。我将如何访问正确的数据？

我为此开发了一个JSFiddle。随意玩弄它。目前，“排序”按钮没有任何效果（因为该函数尚未正确访问数据）。

4

2 回答 2

1

我认为你很接近。xscale 应该使用 i - 这是列表中基准的位置（不是 d 中的基准）。但是，您的排序正在尝试对数据对象进行排序，而不是对值进行排序。尝试这个：

.sort(function(a, b) {
    if (sortOrder) {
        return d3.ascending(a.value, b.value);
    } else {
        return d3.descending(a.value, b.value);
    }
})

我认为对于两个对象，不确定哪个更大。并且升序和降序函数不带访问器。

于 2013-04-18T17:53:55.027 回答
1

您的代码几乎很好，只有两个细节：

比较器函数必须返回正数、负数或零。在您的代码中，您正在比较数据项，而不是它们的值：

function sortItems(a, b) {
   if (sortOrder) { return a.value - b.value; }
   return b.value - a.value;
}

svg.selectAll('rect')
.sort(sortItems)
// update the attributes

sortBars 方法不起作用。我更喜欢使用 d3 绑定事件：

// Bind the event 'onclick' to the sortBars functions
d3.select('#sort').on('click', sortBars);

我分叉了你的 jsFiddle 并适应了它的工作：http: //jsfiddle.net/pnavarrc/3HL4a/4/

参考

于 2013-04-18T17:48:55.873 回答