ticks randomly missing when updated with Vue3

[annisat]

Edit: Fix markdown failure

I'm practicing on making bar chart with d3 within Vue3 framework. I have a <select> to choose between novels and the bar chart shows the distribution of paragraphs' length of that novel. When I first entering the page, the ticks are all shown. But when I select between the novels, some ticks just disappear at seemingly random pattern. Here's my code:

import * as d3 from "d3";

function draw_bar (rect, maxValue) {
  rect.attr("fill", "steelblue")
    .attr("x", function(d, i){
      return 40 + i * 35
    })
    .attr("y", function(d){
      // top of the bar = SVG height 500 - bottom pad 20 - bar height
      return 480 - 460 * (d.counts / maxValue);
    })
    .attr("width", 32)
    .attr("height", function(d){
      // largest bar height = SVG height 500 - bottom & top pad (20+20)
      // every bar height = largest bar height * ratio to the highest bar
      return 460 * (d.counts / maxValue);
    });
}

function draw_axis (yg, maxValue) {
  var yScale = d3.scaleLinear()
    .domain([0, maxValue])
    .rangeRound([460, 0])
    
  console.log(yScale);
  
  var axis = d3.axisLeft(yScale)
  
  console.log(axis);
    
  yg.attr("transform", "translate(40, 20)")
    .call(axis);
}
    
function draw_obj (obj, func, dataset, maxValue) {
  var updateData = d3.select("svg#prac2").selectAll(obj).data(dataset)
  var enterRect = updateData.enter()
  var exitRect = updateData.exit()

  func(updateData, maxValue);
  func(enterRect.append(obj), maxValue);
  exitRect.remove();
}

export function d3draw (dataset) {
  let data_counts = [];
  dataset.forEach( (el) => {data_counts.push(el.counts)} );
  let maxValue = Math.max(...data_counts);
  
  draw_obj("g", draw_axis, [0], maxValue);
  draw_obj("rect", draw_bar, dataset, maxValue);
}

The Vue3 component is rather simple.

import {d3draw} from "./prac2.js";
import dataset from './prac2.json';

export default {
  name: 'D3Practice2',
  data () { return {
    dataset,
    selectNovel: 0,
  } },
  methods: {
    d3draw
  },
  mounted () { 
    this.d3draw(this.dataset[0].stats);
  },
  updated () {
    this.d3draw(this.dataset[this.selectNovel].stats);
  }
}

The structure of dataset is:

{
  "novel": "novel1",
  "stats": [
    { "interval":"0~50", "counts":"589"},
    { "interval":"50~100", "counts":"675"},
   ...
}

[annisat]

I think I solved it. The thing is I'm too eager to make generalization about every d3 object. For objects of constant number such as axes (as opposed to bars), d3 API selection.call() would take care of everything.

It still intrigues me though why certain ticks are removed when selectAll() takes one <g> tag and make one of them my new axis and remove the rest.

[Fil]

probably because exitRect.remove() is called on them?