D3 Tips and Tricks: Interactive Data Visualization/

...

/

Use a 'Number' Input with D3.js

Use a 'Number' Input with D3.js

Learn how to use "number" inputs to adjust properties of your elements using a text example.

We'll cover the following...

Change one element with an input

There are obviously different input types that can be implemented. The following example still rotates our text, but it uses a number type of input to do it:

Press + to interact
<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>

We have set the step value to speed things up a bit when rotating, but it’s completely optional.

The input itself can be adjusted up or down using a mouse click, or have a number typed into the input box. ...