使用D3在选定的单选按钮之间切换

Question

Consider I have 4 radio buttons as in html

<form id="form">
    <input type="radio" name="stack" value="north">north<br>
    <input type="radio" name="stack" value="east" >east<br>
    <input type="radio" name="stack" value="west">west<br>
    <input type="radio" name="stack" value="south">south
</form>

How do I get the value of selected radio button and assign onto a global variable, on selection , using D3.js ,such a way I can toggle between selections?

Answer 1

If those are the only inputs you have, you can do:

d3.selectAll("input").on("change", function(){
    console.log(this.value)
});

To select only that specific group of radio buttons, use their name :

d3.selectAll("input[name='stack']").on("change", function(){
    console.log(this.value)
});

To assign it to a global (declaring without var ):

d3.selectAll("input[name='stack']").on("change", function(){
    globalVariable = this.value;
});

Here is the demo:

 d3.selectAll(("input[name='stack']")).on("change", function(){ console.log(this.value) }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <form id="form"> <input type="radio" name="stack" value="north">north<br> <input type="radio" name="stack" value="east" >east<br> <input type="radio" name="stack" value="west">west<br> <input type="radio" name="stack" value="south">south </form>