爲什麼在D3js中使用相同的代碼會得到不同的結果？

我在使用d3js的條形圖項目中遇到了死衚衕。我試圖從tsv文件中找到不同國家的無人機數量總和。由於電子表格中的多個條目來自同一個國家/地區，因此我想添加這些值。爲什麼在D3js中使用相同的代碼會得到不同的結果？

因此，當我在.attr('y')下運行一次代碼時，結果如此。我仔細檢查了電子表格和總和。但是，當我在.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

我已經把entire code上JS小提琴。我非常感謝幫助，因爲我花了一天的時間強調解決方案。

來源

2016-12-17 st4rgut

你能告訴你到底想要達到什麼嗎？ –

您的JSFiddle無法正常工作。它缺少D3，甚至在修復之後還有其他一些錯誤。 – altocumulus

您看到不同結果的原因是因爲在執行data [i] .Registration + = data [i-1] .Registration時;'您實際上正在修改數據。注意[添加賦值操作符]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Addition_assignment）'+ ='。在回調「高度」時進行計算時，您的數據已被先前的回調改爲「y」。 Cyril提供了一種可能的解決方案[答案]（http://stackoverflow.com/a/41197222/4235784）。 – altocumulus

您將需要總結自己的價值觀：

所以，如果你的數據是具有多個「美屬薩摩亞」，那麼你需要總結所有的無人機，這總計爲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

來源

2016-12-17 09:34:16 Cyril

我添加了一個[評論]（http://stackoverflow.com/questions/41196660/why-am-i-getting-different-results-with-same-code-in-d3js#comment69596046_41196660）解釋爲什麼會發生這種情況。隨意在你的答案中也包括這一點。 – altocumulus

爲什麼在D3js中使用相同的代碼會得到不同的結果？

回答

相關問題