D3更新条形图VUE.js

Question

嘿，我在Vue中的d3图表有问题。除了更新数据，其他一切都很好。

我正在使用道具传递数据，并且当数据更改我的图表而不是更新它时，它会在当前图表的下方创建另一个图表。

我想做的是保留当前图形，并在数据变化时仅更新条形图

<script>
export default 
    props: 
      arr: 
          type: Array
      , 
      colors: 
          type: Array
      
  ,
  watch: 
    arr: 
      immediate: true,
      handler(val) 
        setTimeout(() => 
          this.barCharts(val)
        , 100);
      
    
  ,
  methods: 
    barCharts(data) 
      let margin =  top: 40, right: 20, bottom: 50, left: 60 ;
      let width = 650
      let height = 240; 

      let color = d3.scaleOrdinal().range(this.colors);
      let t = d3.transition().duration(750);

      let g = d3
        .select("#barChart")
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", "100%")
        .append("g")
        .attr("transform", `translate($margin.left, $margin.top)`);

      let xAxisGroup = g
        .append("g")
        .attr("class", "x axis")
        .attr("transform", `translate(0, $height)`);

      let yAxisGroup = g.append("g").attr("class", "y axis");

      // X Scale
      let x = d3
        .scaleBand()
        .range([0, width])
        .padding(0.2);

      // Y Scale
      let y = d3.scaleLinear().range([height, 0]);

      // axis
      x.domain(data.map(d => d.name));
      y.domain([
        0,
        d3.max(data, function(d) 
          return d.value;
        )
      ]);

      g.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x))
        .attr("class", "axis")
        .selectAll("text")
        .style("text-anchor", "end")
        .attr("dx", "-.8em")
        .attr("dy", ".15em")
        .attr("transform", "rotate(-30)");

      g.append("g")
        .call(d3.axisLeft(y))
        .attr("class", "axis");

      // draw bars
      let rects = g.selectAll("rect").data(data);

      rects
        .transition(t)
        .attr("y", function(d) 
          return y(d.value);
        )
        .attr("x", function(d) 
          return x(d.name);
        )
        .attr("height", function(d) 
          return height - y(d.value);
        )
        .attr("width", x.bandwidth())
        .attr("fill", (d, i) => color(i));

      rects
        .enter()
        .append("rect")
        .attr("x", function(d) 
          return x(d.name);
        )
        .attr("width", x.bandwidth())
        .attr("fill", (d, i) => color(i))
        .attr("y", y(0))
        .attr("height", 0)
        .transition(t)
        .attr("y", function(d) 
          return y(d.value);
        )
        .attr("height", function(d) 
          return height - y(d.value);
        );

    
  
;

</script>

我可以实现另一个功能吗？更新以在此函数内调用以仅更新吟游诗人？

提前感谢！