how to achieve one side border radius to element in d3.js

Question

im dealing with bar chart i have almost done with all futures but i got stucked with small issue that all about border radius i wanted to add border radius to top side corners in the bar graph but i couldn't achieved it

i did not go by clip-path method and i have just directly added rect element in the code and that the reason its not allowing me to change one side border radius

how can i add border radius to bars ?im fine even if we achive throught clip-path method

here is my bar graph component

      React.useEffect(() => {
    var outerWidth = convertRemToPixels(40),
      outerHeight = barGraphContainerRef.current.clientHeight;
    var margin = {
        top: convertRemToPixels(2),
        right: convertRemToPixels(2),
        bottom: convertRemToPixels(2),
        left: convertRemToPixels(2),
      },
      width = outerWidth - margin.left - margin.right,
      height = outerHeight - margin.top - margin.bottom;

    var x = d3.scaleBand().range([0, width]);

    var y = d3.scaleLinear().range([height, 0]);

    var xAxis = d3.axisBottom(x);

    var yAxis = d3.axisLeft(y).ticks(10);

    var color = d3.scaleOrdinal().range(['#D73027', '#FFFFBF', '#1A9850']);
    function make_y_gridlines() {
      return d3.axisLeft(y).ticks(9);
    }

    //Defenining the tooltip div

    var chart = d3
      .select(refe.current)
      .attr('width', outerWidth)
      .attr('height', outerHeight);

    let tooltip = d3
      .select('#root .tooltipContainer')
      .style('position', 'absolute')
      .style('top', 0)
      .style('left', 0)
      .style('opacity', 0);

    var gradient = chart
      .select('.lGradient')
      .attr('id', 'gradient')
      .attr('x1', '0%')
      .attr('y1', '00%')
      .attr('x2', '0%')
      .attr('y2', '100%')
      .attr('spreadMethod', 'pad');

    gradient
      .select('.firstStop')
      .attr('offset', '-100%')
      .attr('stop-color', '#0170ac')
      .attr('stop-opacity', 1);

    gradient
      .select('.secondStop')
      .attr('offset', '100%')
      .attr('stop-color', '#013c5d')
      .attr('stop-opacity', 1);

    var main = chart
      .select('.chart')
      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

    main
      .select('.x-axis')
      .attr('transform', 'translate(0,' + height + ')')
      .call(xAxis)
      .style('color', '#a4a4a4');
    main
      .select('.y-axis')
      .attr('transform', 'translate(0,' + 0 + ')')
      .call(yAxis)
      .style('color', '#a4a4a4');

    y.domain([
      0,
      d3.max(graphData, function (d) {
        return d.value;
      }),
    ]);

    x.domain(
      graphData.map(function (d) {
        return d.group;
      })
    ).padding([0.5]);

    main
      .select('.x-axis')
      .call(xAxis)
      .selectAll('text')

      .style('text-anchor', 'end')
      .attr('dx', '.3em')
      .attr('dy', '1em')
      .style('font-size', '.8rem')
      .attr('transform', 'rotate(0)')
      .style('font-family', '"Roboto", sans-serif');

    main
      .select('.y-axis')
      .call(yAxis)
      .selectAll('text')
      .attr('class', 'yAxiesText')
      .attr('transform', 'rotate(-90)')
      .attr('y', '-2em')
      .attr('x', '.4em')
      .attr('dy', '.71em')
      .style('font-size', '.8rem')
      .style('text-anchor', 'end')
      .style('font-family', '"Roboto", sans-serif');

    main
      .select('.gridder')
      .call(make_y_gridlines().tickSize(-width).tickFormat(''))
      .attr('id', 'gridSystem');

    var bar = main.selectAll('.bar').data(graphData, function (d) {
      return d.group;
    });

    bar
      .join('rect')
      .attr('class', 'bar')
      .style('fill', 'url(#gradient)')
      .attr('clip-path', 'url(#round-corner)')

      .attr('x', function (d) {
        return x(d.group);
      })
      // here im making changes to made border radius to one corner -> -> ->
      .attr('rx', '1em')
      .attr('y', function (d) {
        return y(d.value);
      })
      .attr('height', function (d) {
        return height - y(d.value);
      })
      .attr('width', x.bandwidth())

      .on('mouseover', (e, i) => {
        d3.select(e.currentTarget).style('fill', 'url(#gradient)');
        tooltip.transition().duration(0).style('opacity', 1);
        tooltip
          .html(
            `<div class="barTitle">High Priority</div>
                 <div>Economic Order Quantity : <span>5</span></div>
                 <div>Reorder Point : <span>${i.value}</span></div>
                 <div>Safety Stock : <span>0</span></div>
                 <div>Lead Time : <span>0</span></div>`
          )
          .style('left', e.pageX + 20 + 'px')
          .style('top', e.pageY - 0 + 'px');
      })
      .on('mouseout', e => {
        d3.select(e.currentTarget).style('fill', 'url(#gradient)');
        tooltip.transition().duration(0).style('opacity', 0);
        tooltip.style('left', '0px').style('top', '0px');
      })
      .on('mousemove', function (d) {
        tooltip
          .style('left', d.pageX + 20 + 'px')
          .style('top', d.pageY - 0 + 'px');
      });

    bar.exit().transition().duration(1000).attr('width', 0).remove();

    // updated data:
    bar
      .transition()
      .duration(750)
      .attr('x', function (d) {
        return x(d.group);
      })
      .attr('y', function (d) {
        return y(d.value);
      })
      .attr('height', function (d) {
        return height - y(d.value);
      })
      .attr('width', x.bandwidth());
  }, [graphData]);

here is the jsx

 <>
      <svg
        ref={refe}
        width="100%"
        height="100%"
        // style={{ backgroundColor: 'green' }}
      >
        <defs>
          <linearGradient className="lGradient">
            <stop className="firstStop"></stop>
            <stop className="secondStop"></stop>
          </linearGradient>
        </defs>
        <g className="chart">
          <g className="x-axis" />
          <g className="y-axis" />
          <g className="gridder" />
        </g>
      </svg>
</>

I got like this

I want to get like this

thanks advance !!