D3棒グラフ（オブジェクトの配列に基づいて）を値またはキーでソートする方法は？

Question

私は一般的にd3とjavascriptを初めて使いました。私は、単純な棒グラフでいくつかの可能なやりとりの周りを頭で覆そうとしています。

私は何を達成しようとしています

：私はあなたがもう一度クリックする場合は、キーのアルファベット順に、その後のバーのいずれかをクリックしたときの値で、私の棒グラフを並べ替えるためのオプションを持っていると思い

。

私の進捗状況は、これまで：

私の棒グラフは、キーは会社の名前であり、値は0から100までのスケール上の各企業との平均満足度を示すオブジェクトの配列に基づいています。

var data = [ 
    {key: "Test 1", value: 21}, 
    {key: "Test 2", value: 34}, 
    ... 
    {key: "Test 12", value: 22}, 
    {key: "Test 13", value: 97} 
]; 

あなたはここに私の進捗状況とコード全体を見ることができます：bl.ocks.org

を私は配列をソートする機能を作成しようとしました。しかし、私はバーが実際にはキーに基づいて配置されているので、実際にバーの位置を変更する方法はかなり失われており、序数的なスケールでそれをどうやって行うのか分かりません。まず

var x = d3.scaleBand() 
    .domain(data.map(function(d){ 
     return d.key; 
    })) 
    .range([margin.left, width]) 
    .padding(0.1); 

var y = d3.scaleLinear() 
    .domain([0, d3.max(data, function(d){ 
     return d.value; 
    })]) 
    .range([height, margin.top]) 


var sortBars = function(){ 
svg.selectAll("rect") 
    .sort(function(a,b){ 
     return b.value-a.value;  
    }) 
    .transition("sort") 
    .duration(100) 
    .attr("x", function(d,i){ 
     return x(d.key); 
    }) 
} 

私は配列をソート場合は、キーに基づいて、戻り値が新しい順に基づいている必要があり、動作するようには思えない。思いました

ご協力いただきありがとうございます。

Answer 1

これを行う簡単な方法は、データ配列をソートし、ドメインを再計算することです。

data.sort(function(a, b) { 
    return d3.ascending(a.key, b.key) 
}) 
x.domain(data.map(function(d) { 
    return d.key; 
})); 

と値：キーによってhttps://bl.ocks.org/anonymous/bc5a9691a3417b403d4e8ade3297afa3/3a2434c1c2849e476791e581754ec27e055db4d6

PS：キーでソートすることを考えている。ここ

data.sort(function(a, b) { 
    return d3.descending(a.value, b.value) 
}) 
x.domain(data.map(function(d) { 
    return d.key; 
})); 

は、それらの変更を使用してbl.ocksで、私は2つのボタンを置きます文字列をソートしています。したがって、「テスト2」は「テスト13」の後に来る。 "Test 1"、 "Test 2"、 "Test 3"などのシーケンスが必要な場合は、文字列を変更する必要があります。