在d3中更新条形图

Question

我有关于更新d3.js中的条形图的问题。我已经玩过转换功能，但似乎无法使其正常工作。

以下是基本条形图的代码：

 <script>

var width = 960,
    height = 500;

var y = d3.scale.linear()
    .range([height, 0]);

var chart = d3.select(".chart")
    .attr("width", width)
    .attr("height", height);

d3.tsv("data/data.tsv", type, function(error, data) {
  y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

  var barWidth = width / data.length;

  var bar = chart.selectAll("g")
      .data(data)
    .enter().append("g")
      .attr("transform", function(d, i) { return "translate(" + i * barWidth + ",0)"; });

  bar.append("rect")
      .attr("y", function(d) { return y(d.frequency); })
      .attr("height", function(d) { return height - y(d.frequency); })
      .attr("width", barWidth - 1);

  bar.append("text")
      .attr("x", barWidth / 2)
      .attr("y", function(d) { return y(d.frequency) + 3; })
      .attr("dy", ".75em")
      .text(function(d) { return d.frequency; });
});

function type(d) {
  d.frequency = +d.frequency; 
  return d;
}

到目前为止，我有更新功能：

 function updateBarData(){

           var width = 960,
    height = 500;

var y = d3.scale.linear()
    .range([height, 0])

        d3.tsv("data/data3.tsv", type, function(error, data) {
        y.domain([0, d3.max(data, function(d) { return d.frequency; })])  
      })

           var barupdate = chart.selectAll("")
           .data(data);

        barupdate.enter()
       .attr("transform", function(d, i) { return "translate(" + i * barWidth + ",0)"; })

  barupdate.append("rect")
      .attr("y", function(d) { return y(d.frequency); })
      .attr("height", function(d) { return height - y(d.frequency); })
      .attr("width", barWidth - 1);

  barupdate.append("text")
      .attr("x", barWidth / 2)
      .attr("y", function(d) { return y(d.frequency) + 3; })
      .attr("dy", ".75em")
      .text(function(d) { return d.frequency; });


           barupdate.transition()
         .duration(1000)
       .attr("transform", function(d, i) { return "translate(" + i * barWidth + ",0)"; })

  barupdate.append("rect")
      .attr("y", function(d) { return y(d.frequency); })
      .attr("height", function(d) { return height - y(d.frequency); })
      .attr("width", barWidth - 1);

  barupdate.append("text")
      .attr("x", barWidth / 2)
      .attr("y", function(d) { return y(d.frequency) + 3; })
      .attr("dy", ".75em")
      .text(function(d) { return d.frequency; });





         barupdate.exit().transition()
         .duration(1000)
         .remove();




               }

我一直在这一天开始，所以可能会遗漏一些令人眼花缭乱的事情，但会感激任何帮助。

感谢。

更新1：

function updateBarData(){

    d3.tsv("data/data3.tsv", type, function(error, data) {

  })

   var updatechart = g.selectAll("body")
   .data(data)

   updatechart.enter().insert("rect")
   .attr("y", function(d) { return y(d.frequency); })
  .attr("height", function(d) { return height - y(d.frequency); })
  .attr("width", barWidth - 1)

   updatechart.transition()
   .duration(1000)
   .attr("y", function(d) { return y(d.frequency); })

   updatechart.exit()
   .remove();




           }