D3 only render to certain depth

For d3, given an array of nested objects. Is it possible to only render a certain amount of depth?

I am basing off of some sunburst examples online like : https://github.com/Nikhilkoneru/react-d3-zoomable-sunburst/blob/master/src/index.js

Using the .selectAll method from d3, can I only limit the sunburst to render 'X' depths, instead of rendering the entire array of nested objects?

I'm trying to render a really large array, and it causes a really laggy experience.

This is the selectAll that I'm using from the github example.

svg.selectAll('path')
        .data(partition(root)
        .descendants())
        .enter()
        .append('path')
        .style('fill', (d) => {
                let hue;
                const current = d;
                if (current.depth === 0) {
                    return '#33cccc';
                }
                if (current.depth <= 1) {
                    hue = hueDXScale(d.x0);
                    current.fill = d3.hsl(hue, 0.5, 0.6);
                    return current.fill;
                }
                if(current.depth <= 2){
                    console.log("depth > 2: ", d)
                    current.fill = current.parent.fill.brighter(0.5);
                    const hsl = d3.hsl(current.fill);
                    hue = hueDXScale(current.x0);
                    const colorshift = hsl.h + (hue / 4);
                    return d3.hsl(colorshift, hsl.s, hsl.l);
                }
            })
            .attr('stroke', '#fff')
            .attr('stroke-width', '1')
            .on('click', d => click(d, node, svg, x, y, radius, arc))
            .on('mouseover', function (d) {
                if (props.tooltip) {
                    d3.select(this).style('cursor', 'pointer');
                    tooltip.html(() => {
                        const name = utils.formatNameTooltip(d);
                        return name;
                    });
                    return tooltip.transition().duration(50).style('opacity', 1);
                }
                return null;
            })
            .on('mousemove', () => {
                if (props.tooltip) {
                    tooltip
                        .style('top', `${d3.event.pageY - 50}px`)
                        .style('left', `${props.tooltipPosition === 'right' ? d3.event.pageX - 100 : d3.event.pageX - 50}px`);
                }
                return null;
            })
            .on('mouseout', function () {
                if (props.tooltip) {
                    d3.select(this).style('cursor', 'default');
                    tooltip.transition().duration(50).style('opacity', 0);
                }
                return null;
            });

As you can see, from the current.depth, i'm able to filter out what depth is more than 2. Is it possible to add display: none to anything more than depth of 2, or is there a better way to not render anything more than depth of 2 from current