Skip to content

Instantly share code, notes, and snippets.

@git-ashish

git-ashish/README.md

Forked from mbostock/.block
Last active August 29, 2015 14:06
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save git-ashish/158fd80987c3dd1aa927 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save git-ashish/158fd80987c3dd1aa927 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

This example demonstrates how to animate a path and a textPath at the same time. I wouldn’t use this technique—the text is scrunched up at the beginning of the arc at the beginning of the animation. Instead, I would use the arc to clip the text, so that the text is revealed as the arc expands.

This example also demonstrates two unfortunate bugs in WebKit browsers:

  • You can’t select textPath elements because of a bug in how WebKit handles case-sensitive element names. See bug 83438. WebKit shows no sign of fixing this bug, unfortunately.

  • Updating a path element by itself does not trigger redraw on dependent elements that reference this path. So, even though we update the path, the referencing textPath element will not be redrawn. To workaround this update bug, we create a custom transition that repeatedly sets the textPath’s xlink:href attribute to “#path”.

See related Stack Overflow question.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
fill: #3182bd;
}
text {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 24px;
}
</style>
<body>
<script src="http://d3js.org/d3.v2.js?2.9.6"></script>
<script>
var arc = d3.svg.arc()
.innerRadius(180)
.outerRadius(220)
.startAngle(0)
.endAngle(function(t) { return t * 2 * Math.PI / 3; });
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
.append("g")
.attr("transform", "translate(480,250)");
svg.append("path")
.attr("id", "path")
.attr("d", arc(1));
svg.append("text")
.attr("x", 8)
.attr("dy", 28)
.append("textPath")
.attr("class", "textpath")
.attr("xlink:href", "#path")
.text("Hello, curved textPath!");
var transition = svg.transition()
.duration(5000);
transition.selectAll("#path")
.attrTween("d", function() { return arc; });
transition.selectAll(".textpath")
.attrTween("xlink:href", function() { return function() { return "#path"; }; });
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment