使用一個數據對象製作條形圖

我正在嘗試使用來自世界地圖的點擊數據製作條形圖。當用戶點擊一個國家時，圖表會返回我想要製作條形圖的某些數據（對於這個特定的問題，我只想要一個欄）。數據[指數]，其中我想在條形圖來可視化，在這個特定的例子是這樣的，當我CONSOLE.LOG（）它：使用一個數據對象製作條形圖

Object {CountryName: "United States", CountryCode: "USA", GDP: 17419000000000, Variable: 24}

我已經固定在X軸和Y軸，但直到現在它仍然使來自其他國家的所有酒吧，這是在原始數據。任何人都可以向我解釋我可以如何在上面的對象中的條形圖中製作單個條形圖嗎？

繪製我有下面的代碼吧：

// draw the bars 
     svg.selectAll(".bar") 
     .data(data) 
     .enter() 
      .append("rect") 
      .attr("class", "bar") 
      .attr("id", function(d) { return (d.CountryName); }) 
      .attr ({ 
       "x": function(d) {return xScale(d.CountryCode);}, 
       "y": function(d) {return yScale(d.Variable);}, 
       "width": xScale.rangeBand(), 
       "height": function(d) { return height - yScale(d.Variable);} 
      }) 
      .on('mouseover', tip.show) 
      .on('mouseout', tip.hide);

感覺就像我什麼都試過，使其工作。任何幫助將不勝感激！謝謝。

來源

2016-06-15 Stijn Robben

不使用'數據（數據）'。使用剛剛放在'console.log'中的相同子集。 –

我也嘗試過。但是條形圖中沒有顯示任何內容，甚至沒有任何控制檯中的錯誤。 –

它結束了，我不得不使用datatemp = [data [index]]然後做.data（datatemp） –

我只需將對象推入數組並從該數組中繪製條。

var datatemp = []; 

datatemp.push(data) 

// draw the bars 
     svg.selectAll(".bar") 
     .data(datatemp) 
     .enter()  
      .append("rect") 
      .attr("class", "bar") 
      .attr("id", function(d) {return d.CountryName }) 
      .attr ({ 
       "x": function(d) {return xScale(d.CountryName);}, 
       "y": function(d) {return yScale(d.Variable);}, 
       "width": xScale.rangeBand(), 
       "height": function(d) { return height - yScale(d.Variable);} 
      }) 
      .on('mouseover', tip.show) 
      .on('mouseout', tip.hide);

來源

2016-06-15 15:56:06

使用一個數據對象製作條形圖

回答

相關問題