d3.js - d3.jsのコンボボックス変数トグルを使用した遷移棒グラフ

Question

ユーザーが json 内の変数を切り替えることができる単純な d3.js 折れ線グラフを作成しました。

http://plnkr.co/edit/8r0DBxVFgY6SJKbukWh5?p=preview

ただし、これを折れ線グラフではなく棒グラフにする必要があり、バーを移行する方法や、ポイントなど、selectAll を使用して描画するその他のものを理解できません。この場合、次のように d3.json 関数でバーを描画しています。

svg.selectAll(".bar")
  .data(data)
  .enter().append("rect")
  .attr("class", "bar")
  .attr("x", function(d) { return x(d.watershed); })
  .attr("width", x.rangeBand())
  .attr("y", function(d) { return y(d.variable); })
  .attr("height", function(d) { return height - y(d.variable); });

問題は、新しいデータを反映するようにバーを遷移させる updateData 関数に何を入れればよいかということです。d3.json 関数と updateData 関数の両方から svg.selectAll('.bar") を呼び出すように変数を設定する必要があるように感じますが (var valueLine と同様)、それがどのように見えるかの例を見つけることができませんでしたこのコンテキストで。