データの1つのオブジェクトでbarchartを作成する

Question

ワールドマップからオンクリックのデータでbarchartを作成しようとしています。ユーザーが国をクリックすると、グラフには棒グラフを作成するための特定のデータが返されます（この特定の質問では1バーしか必要ありません）。データ[インデックス]、私は私の棒グラフで視覚化したい、私は（CONSOLE.LOGたときに、この特定の例では、このようになります）それ：

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

私はすでにX軸とY軸を固定しかし、これまでのところ、元のデータにある他の国のすべてのバーが作成されています。誰も私のbarchartの上のオブジェクトから単一のバーを作ることができる方法を私に説明することができますか？私はそれを動作させるためにすべてを試みたように感じる

// 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); 

：私は次のコードを持っている棒を描画するための

。どんな助けでも大歓迎です！ありがとう。

Answer 1

オブジェクトを配列にプッシュして、この配列からバーを描画するだけでした。

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);