2016-12-17 7 views
3

私は、d3jsを使って棒グラフプロジェクトで行き詰まってしまった。私は、tsvファイルのデータを使用して、各国のドローン数の合計を求めようとしています。スプレッドシートの複数のエントリは同じ国のものなので、これらの値を追加したいと思います。D3jsで同じコードで異なる結果が得られるのはなぜですか?

コードを.attr('y')の下に1回実行したときにうまくいきました。私はスプレッドシートを二重にチェックし、合計を合計しました。しかし、私が.attr('height')で同じ条件を実行したとき、私は棒グラフを台無しにしていました。ここで私はとのトラブルを抱えているコードです:

g.selectAll(".bar") 
    .data(data) 
    .enter().append("rect") 
     .attr("class", "bar") 
     .attr("x", function(d) { return x(d.Country); }) 
     .attr("y", function(d,i) { 

     try{ 
      if (data[i].Country == data[i-1].Country){ 

      data[i].Registration += data[i-1].Registration; 
      } 
      else{ 
      console.log(data[i-1].Country + ' ' + data[i-1].Registration); 
      return data[i-1].Registration;//y(data[i-1].Registration); 
      } 
     } 
     catch(err){ 
      console.log('did not work') 
     } 

     }) 
     .attr("width",20) 
     .attr("height", function(d,i) { 
     try{ //SAME CODE DIFFERENT REGISTRATION VALUES 

      if (data[i].Country == data[i-1].Country){ 
      data[i].Registration += data[i-1].Registration; 
      } 
     else{ console.log(data[i-1].Country + ' ' + data[i-1].Registration); return (height - data[i-1].Registration);} 
     } 
     catch(err){ 
      console.log('did not work') 
     } 


     }); 
    }) 

TSVファイルには、次のようになります。

Country Registration 
land Islands 1 
American Samoa 1 
American Samoa 1 
American Samoa 1 
American Samoa 6 
American Samoa 1 
American Samoa 1 
American Samoa 1 
Antigua and Barbuda 1 
Argentina 1 
Australia 1 
Australia 2 
Australia 1 
Australia 1 
Brazil 1 
Brazil 1 
Brazil 1 

私はjsのフィドルにentire codeを入れています。私は解決策を強調して一日以上過ごしたので、本当に助けに感謝します。

+0

を作業

はあなたがachiveしたい正確に何を伝えることができます。 –

+0

JSFiddleが機能しません。それはD3を欠いており、それを修正した後でさえ、他のエラーがあります。 – altocumulus

+1

異なる結果が表示される理由は、 'data [i] .Registration + = data [i-1] .Registration;'を実行すると実際にデータを変更しているからです。 [加算代入演算子](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Addition_assignment) '+ ='に注目してください。 'height'へのコールバックで計算を行うとき、あなたのデータは' y'への前のコールバックによって既に変更されています。可能な解決法はCyrilの[answer](http://stackoverflow.com/a/41197222/4235784)によって提供されています。 – altocumulus

答えて

2

あなたの値を合計する必要があります。

だからあなたのデータを複数の「アメリカ領サモア」を有するされている場合、あなたが行うには12

にまとめた、すべての無人偵察機を合計する必要がありますd3 nestを使用して、その登録をグループ化して合計します。

var data_sum = d3.nest() 
    .key(function(d) { return d.Country; })//group by country 
    .rollup(function(v) { return d3.sum(v, function(d) { return d.Registration; }); })//roll up all resgistrations 
    .entries(data); 

さて、これはあなたにちょうどこのexampleとして棒グラフを作るために使用することができますまとめたデータを、提供します。コードhere

+1

これがなぜ起こっているのかを説明する[コメント](http://stackoverflow.com/questions/41196660/why-am-i-getting-different-results-with-same-code-in-d3js#comment69596046_41196660)を追加しました。あなたの答えにもこれを含めてください。 – altocumulus

関連する問題