This is a demonstration of the use of the html 'range' input to rotate a text element using d3.js v4.
This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 4 of d3.js.
Last active
August 16, 2016 10:01
-
-
Save d3noob/d072f01abe615478633f39eb7c383dee to your computer and use it in GitHub Desktop.
Rotating text using a range input in v4
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <title>Input test</title> | |
| <p> | |
| <label for="nAngle" | |
| style="display: inline-block; width: 240px; text-align: right"> | |
| angle = <span id="nAngle-value">…</span> | |
| </label> | |
| <input type="range" min="0" max="360" id="nAngle"> | |
| </p> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var width = 600; | |
| var height = 300; | |
| var holder = d3.select("body") | |
| .append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| // draw the text | |
| holder.append("text") | |
| .style("fill", "black") | |
| .style("font-size", "56px") | |
| .attr("dy", ".35em") | |
| .attr("text-anchor", "middle") | |
| .attr("transform", "translate(300,150) rotate(0)") | |
| .text("d3noob.org"); | |
| // when the input range changes update the angle | |
| d3.select("#nAngle").on("input", function() { | |
| update(+this.value); | |
| }); | |
| // Initial starting angle of the text | |
| update(0); | |
| // update the element | |
| function update(nAngle) { | |
| // adjust the text on the range slider | |
| d3.select("#nAngle-value").text(nAngle); | |
| d3.select("#nAngle").property("value", nAngle); | |
| // rotate the text | |
| holder.select("text") | |
| .attr("transform", "translate(300,150) rotate("+nAngle+")"); | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment