Skip to content

Instantly share code, notes, and snippets.

@d3noob d3noob/index.html
Last active Aug 29, 2015

Embed
What would you like to do?
HTML number input and d3.js

This is a simple example of implimenting an HTML input using a <number> input tag and using that to adjust a d3.js drawn svg element (rotate text).

It is used as an example and described in the book D3 Tips and Tricks.

<!DOCTYPE html>
<meta charset="utf-8">
<title>Input (number) test</title>
<p>
<label for="nValue"
style="display: inline-block; width: 240px; text-align: right">
angle = <span id="nValue-value"></span>
</label>
<input type="number" min="0" max="360" step="5" value="0" id="nValue">
</p>
<script src="http://d3js.org/d3.v3.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 element
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 value
d3.select("#nValue").on("input", function() {
update(+this.value);
});
// Initial update value
update(0);
// adjust the text
function update(nValue) {
// adjust the value
holder.select("text")
.attr("transform", "translate(300,150) rotate("+nValue+")");
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.