diff --git a/index.html b/index.html index 00ae3f20794aafa87f12402e395e8bc6d7e06412..0ebf93b790e457c045505556d58df2e0e789cd1b 100644 --- a/index.html +++ b/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"); }); diff --git a/src/arrowonpath.js b/src/arrowonpath.js index d9111cf41fd9748dc9fee29ba9d8d18e241479cd..7ec43a0c6c0f1fd9f5e6a568f7e6fb66640be088 100644 --- a/src/arrowonpath.js +++ b/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; };