This is a demonstration of the use of the html 'number' 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.
This is a demonstration of the use of the html 'number' 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.
<!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="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 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> |