added label text

index.html

@@ -36,23 +36,36 @@
 
 
 
-        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");
-
+            var arr = d3.cyclicarrow()(data);
+            var arrgen = d3.arrowonpath();
 
             svg.selectAll("whatever")
                 .data(arr)
                 .enter()
                 .append('path')
-                .attr('d', d3.arrowonpath())
+                .attr('d', arrgen)
                 .style('fill', function (d) { return (color(d.index)) })
                 .style("stroke", "black")
                 .style("stroke-width", "1")
-                .style("opacity", 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") //place the text halfway on the arc
+                .attr("startOffset", function (d) { return arrgen.center(d) })
+                .text('blah')
+                .attr("font-family", "sans-serif")
+                .attr("font-size", "10")
+                .attr("fill", "black");
 
         });
 

src/arrowonpath.js

@@ -123,6 +123,14 @@ export default function () {
         context.closePath();
         if (buffer) return context = null, buffer + "" || null;
     }
+
+    arrowonpath.center = function () {
+            var start = path_l * arguments[0].start,
+            end = path_l * arguments[0].end,
+            length = end - start;
+            return ( start + (length/2));
+    };
+
     arrowonpath.svgpath = function (_) {
         return arguments.length ? (svgpath = typeof _ === "function" ? _ : constant(+_), arrowonpath) : svgpath;
     };