<!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", "fifth"];
// set the color scale
var color = d3.scaleOrdinal(d3.schemeCategory10);
var arr = d3.cyclicarrow()(data);
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");
svg.selectAll("whatever")
.data(arr)
.enter()
.append('path')
.attr('d', d3.arrowonpath())
.style('fill', function (d) { return (color(d.index)) })
.style("stroke", "black")
.style("stroke-width", "1")
.style("opacity", 1);
});
</script>
</body>