Question

我正在使用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。随意玩它。目前，排序按钮不会产生任何影响（因为该功能尚未正确访问数据）。

Answer 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/

<强>参考

https://github.com/mbostock/d3/wiki/Selections#wiki-sort

Answer 2

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

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

我认为有两个对象是未定义哪一个更大。升序和降序函数不接受访问器。

使用D3.JS访问JS Object中的'value'

2 个答案: