title: D3 update bar chart VUE.js
body: <p>Hey I have a problem with d3 chart in Vue. Everything is loading fine except updating data.</p>
  
  <p>I'm using props to pass the data and as the data is changing my chart instead of updating it creates another one just below the current one.</p>
  
  <p>What I wanna do is to keep the current graph and update only the bars as data is changing</p>
  
  <pre><code>&lt;script&gt;
  export default {
      props: {
        arr: {
            type: Array
        }, 
        colors: {
            type: Array
        }
    },
    watch: {
      arr: {
        immediate: true,
        handler(val) {
          setTimeout(() =&gt; {
            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 =&gt; 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) =&gt; color(i));
  
        rects
          .enter()
          .append("rect")
          .attr("x", function(d) {
            return x(d.name);
          })
          .attr("width", x.bandwidth())
          .attr("fill", (d, i) =&gt; 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);
          });
  
      }
    }
  };
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Can I implement another function ex. update to call inside of this function to update only the bard??</p>
  
  <p>Thanks in advance!</p>