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

I think you are pretty close. The xscale should be using i - which here is the position of the datum in the list (not the datum which is in d). However your sort is trying to sort the data objects, not the values. Try this:

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

I think with two objects it is undefined which one is bigger. And the ascending and descending functions do not take accessors.

于 2013-04-18T17:53:55.027 に答える
1

あなたのコードはほとんど良かったです。詳細は 2 つだけです。

コンパレータ関数は、正、負、またはゼロを返す必要があります。コードでは、値ではなくデータ項目を比較しています。

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 に答える