Skip to content

Instantly share code, notes, and snippets.

@d3noob

d3noob/index.html

Last active December 3, 2016 02:27
Show Gist options
  • Save d3noob/b901b4c8242e5c2de95d0b6b1656cc33 to your computer and use it in GitHub Desktop.
Save d3noob/b901b4c8242e5c2de95d0b6b1656cc33 to your computer and use it in GitHub Desktop.
Download ZIP
Input acting on two elements in v4
Raw
readme.md

This is a demonstration of the use of the html 'range' input to rotate two text elements 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.

Raw
index.html
<!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 d3.js text
holder.append("text")
.attr("class", "d3js")
.style("fill", "black")
.style("font-size", "56px")
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.attr("transform", "translate(300,55) rotate(0)")
.text("d3.js");
// draw d3noob.org text
holder.append("text")
.attr("class", "d3noob")
.style("fill", "black")
.style("font-size", "56px")
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.attr("transform", "translate(300,130) rotate(0)")
.text("d3noob.org");
// when the input range changes update the rectangle
d3.select("#nAngle").on("input", function() {
update(+this.value);
});
// Initial starting height of the rectangle
update(0);
// update the elements
function update(nAngle) {
// adjust the range text
d3.select("#nAngle-value").text(nAngle);
d3.select("#nAngle").property("value", nAngle);
// adjust d3.js text
holder.select("text.d3js")
.attr("transform", "translate(300,55) rotate("+nAngle+")");
// adjust d3noob.org text
holder.select("text.d3noob")
.attr("transform", "translate(300,130) rotate("+(360 - nAngle)+")");
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment