From 2e9ab026ed1b8d18edcab1d3c8e367c4d1b8e2da Mon Sep 17 00:00:00 2001
From: "Wonko T. Sane" <42@wonko.de>
Date: Fri, 6 Mar 2020 20:13:56 +0100
Subject: [PATCH] added label text
---
index.html | 21 +++++++++++++++++----
src/arrowonpath.js | 8 ++++++++
2 files changed, 25 insertions(+), 4 deletions(-)
diff --git a/index.html b/index.html
index 00ae3f2..0ebf93b 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 d9111cf..7ec43a0 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;
};
--
GitLab