D3棒グラフのソートが機能しない

Question

簡単な.csvデータで棒グラフを作成しました。最初の列は「チーム」で、チーム名がテキストとして含まれています。 2番目の列は「ゴール」で、得点の数が含まれています。
しかし、もっと多くの目標を持つチームが先にくるようにバーを並べ替える必要があります。私はウェブ上で見つけることができるすべてを試みたが、私の場合はそれらのどれも働かない。私は非常に混乱していた...

コード：

var svg = d3.select("svg"), 
    margin = {top: 20, right: 20, bottom: 30, left: 40}, 
    width = +svg.attr("width") - margin.left - margin.right, 
    height = +svg.attr("height") - margin.top - margin.bottom; 

var x = d3.scaleBand().rangeRound([0, width]).padding(0.1), 
    y = d3.scaleLinear().rangeRound([height, 0]); 

svg = svg.append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

d3.csv("StatsByClub1.csv", function(d) { 
    d.Goals = +d.Goals; 
    return d; 
}, function(error, data) { 
    if (error) throw error; 

    x.domain(data.map(function(d) { return d.Team; })); 
    y.domain([0, d3.max(data, function(d) { return d.Goals; })]); 

    svg.append("g") 
     .attr("class", "axis axis--x") 
     .attr("transform", "translate(0," + height + ")") 
     .call(d3.axisBottom(x)); 

    svg.append("g") 
     .attr("class", "axis axis--y") 
     .call(d3.axisLeft(y)) 
    .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", "0.71em") 
     .attr("text-anchor", "end") 
     .text("Goals"); 

    svg.selectAll(".bar") 
     .data(data) 
     .enter().append("rect") 
    // sorting does not work! 
     .sort(function(a, b) {d3.descending(a.Goals, b.Goals)}) 
     .attr("class", "bar") 
     .attr("x", function(d) { return x(d.Team); }) 
     .attr("y", function(d) { return y(d.Goals); }) 
     .attr("width", x.bandwidth()) 
     .attr("height", function(d) { return height - y(d.Goals); }); 

データは次のようになります。

Team Goals 
Man. United 49 
Man. City 71 
Arsenal 65 
Hotspur 69 
Liverpool 63 
Chelsea 59 
Everton 59 
Swansea 48 
Stoke City 41 
Sunderland 42 

Answer 1

ソートd3.descendingを使用して、データ配列いる：

aがbより大きい場合は-1を返し、aがbより小さい場合は1を、または0を返します。これはコンパレータ関数fまたは自然順序を逆にすることができ、組み込みの配列ソートメソッドとともに使用して、要素を降順で並べ替えることができます。

data.sort((a, b) => d3.descending(a.Goals, b.Goals)); 

：あなたがドメインを設定する前に、データをロードした後

ので、この権利を置きます