<!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>