index.html

<!DOCTYPE html>
<meta charset="utf-8">

<head>
    <title>Page Title</title>
    <style>
        circle {
            fill: steelblue;
            stroke: #fff;
            stroke-width: 3px;
        }

        path {
            fill: none;
            stroke: #000;
            stroke-width: 1px;
        }
    </style>


</head>


<body>
    <div id='arrows' style="width:30px;"></div>

    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="dist/d3-cyclicarrow.js"></script>
    <script>


        // Create dummy data
        var data = ["first", "second", "third", "fourth"];

        var arr = d3.cyclicarrow()(data);
        console.log(d3.entries(arr));
        d3.svg('path.svg').then(function (svg) {
            svgnode = document.importNode(svg.documentElement, true);
            d3.select("div#arrows").node().append(svgnode);
            svg = d3.select("div#arrows svg");

            console.log(svg);
            svg.selectAll("whatever")
                .data(arr)
                .enter()
                .append('path')
                .attr('d', d3.arrowonpath());


            //bh = d3.cyclicarrow()([]);
            //console.log(bh);
        });


    </script>

</body>