I would just like to check if I am missing something here. Is this a bug or am I doing it wrong?
http://bl.ocks.org/cool-Blue/11747940a2be097e5986
http://bl.ocks.org/cool-Blue/14f575ae6945769aca39
Looks like the fix will be released soonish.
In Chrome
If you use camelCase, the textPath works but you can't select it.
If you use lowercase, the textpath doesn't work but you can select it.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
text {
fill: black;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var width = 600,
height = 200,
svg = d3.select(document.body).append("svg")
.attr("height", height)
.attr("width", width),
arc = d3.svg.arc()
.innerRadius(100)
.outerRadius(100)
.startAngle(0)
.endAngle(Math.PI / 2);
panel("textPath", 1);
panel("textpath", 2);
function panel(tp, id) {
var offset = [width / 8, width / 2],
group = svg.append("g")
.attr("transform", "translate(" + [offset[id-1], 2* height / 3] + ")");
group.append("text").attr("y", -120).text(tp)
group.append("path")
.attr("d", arc)
.attr("stroke", "black")
.attr("id", "path"+id);
group.append("text")
.append(tp)
.attr("xlink:href", "#path"+id)
.text("test text");
group.append("text")
.text("other text");
group.append("text")
.text(tp + " selection size: " + group.selectAll("text")
.filter(function () {
var p = d3.select(this).selectAll(tp);
return p.size() && p.attr("xlink:href") == "#path" + id
}).size())
.attr("y", 50)
};
</script>
</body>
</html>text {
fill: black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>