I am trying to create a line chart in D3 where points are connected by straight lines. However, I want the corners where the lines connect to be curved. I am trying to do this by adding extra points near the connections, and using a curve function. Currently I’m using curveBasis, but it’s not giving me a good perfect semicircle which is what I want.

Is there a way to use a D3 curve function to create a good semicircle here? Or is there an easier way to add curves to a line chart’s corners without adding extra points into the data?

Here is an example of what I have currently. I just want the bend to be more of a perfect quarter of a circle. The green arrows show the approximatte location of the extra points I added to achieve the curve effect only at the corner:

Here is the HTML I am currently using (you should be able to run my example using only the below code):

<!-- Create a div where the graph will take place -->
    <div class="js-csi-sales-chart"></div>
    <script type="module">
        import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";

        
        // set the dimensions and margins of the graph
        const csiMargin = { top: 10, right: 30, bottom: 30, left: 60 },
            width = 445 - csiMargin.left - csiMargin.right,
            height = 315 - csiMargin.top - csiMargin.bottom
        ;
        var svg = d3.select(".js-csi-sales-chart")
            .append("svg")
            .attr("class", "csi-svg--sales")
            .attr("width", width + csiMargin.left + csiMargin.right)
            .attr("height", height + csiMargin.top + csiMargin.bottom)
            .append("g")
            .attr("transform",
                "translate(" + csiMargin.left + "," + csiMargin.top + ")"
            )
        ;

        let radius = 20; 

        let data = [
            {
                x: 50,
                y: 10
            },
            {
                x: 50,
                y: 100 - radius
            },
            {
                x: 50,
                y: 100
            },
            {
                x: 50 + radius,
                y: 100
            },
            {
                x: 200,
                y: 100
            },
        ]

        const line = d3
        .line()
        .x(d => d.x )
        .y(d => d.y )
        .curve(d3.curveBasis)

        svg.append("path")
        .datum(data)
        .attr("stroke", "blue")
        .attr("stroke-width", 1.5)
        .attr("fill", "transparent")
        .attr("d", line)

    </script>

I tried to add extra points to the chart and use curveBasis to make a circular curve between them.