<!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);
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");
var arr = d3.cyclicarrow()(data);
var arrgen = d3.arrowonpath();
svg.selectAll("whatever")
.data(arr)
.enter()
.append('path')
.attr('d', arrgen)
.style('fill', function (d) { return (color(d.index)) })
.style("stroke", "black")
.style("stroke-width", "1")
.style("opacity", 0.5);
svg.selectAll("text")
.data(arr)
.enter()
.append('text')
.append("textPath")
.attr("xlink:href", "#path905") //place the ID of the path here
.style("text-anchor", "middle")
.attr("startOffset", function (d) { return arrgen.center(d) })
.text(function (d) { return d.value })
.attr("font-family", "sans-serif")
.attr("font-size", "10")
.attr("fill", "black");
});
</script>
</body>