D3.js pie chart not showing all arcs

I have started to learn d3.js. My main goal is zoomable sunburst chart but trying to learn whole library and using it I am trying to create a pie chart. In the pie chart all the arcs are not showing. Please guide regarding this.

CSS:

<style>
    

svg{
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
    }
    </style>

Html:

<svg style="width:300px;height:300px"></svg>

Javascript/Jquery:

<script src="https://d3js.org/d3.v6.min.js"></script>

<script>
        function pieChart() {
            const data = [{
                name: 'Chrome',
                value: 50
            }, {
                name: 'IE',
                value: 60
            }, {
                name: 'Opera',
                value: 30
            }, {
                name: 'Firefox',
                value: 40
                }];
            try {
                const svg = d3.select('svg'),
                    width = svg.attr('width'),
                    height = svg.attr('height');
                const radius = 150;
                const g = svg.append('g').attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
                const color = d3.scaleOrdinal(['green', 'gray', 'red', 'blue']);
                const pie = d3.pie().value(d => d.value);                    
                const path = d3.arc().outerRadius(radius).innerRadius(radius-120);
                const label = d3.arc().outerRadius(radius).innerRadius(radius - 10);
                const pies = g.selectAll('.arc').data(pie(data)).enter().append('g').attr('class', 'arc');
                pies.append('path').attr('d', path).attr('fill', d => color(d.data.value));
                pies.append('text').text(d => d.data.name).attr('transform', function (d) { return "translate("+label.centroid(d)+")"});
            }
            catch (ex) {
                alert(ex);
            }
        }
    </script>