d3之组件的运用（单选框，下拉列表，滑动轴，多选）

目录

单选框

1.前端

<form name="myForm" action="" method="" style="position:absolute;top:30px;left:460px;line-height:20.5px;">    <input type="radio" class="radioclass1" name="single1">产值<br>    <input type="radio" class="radioclass1" name="single1" checked="true">占比</form>

2.交互

d3.selectAll(".radioclass1")    .on("click",function(){                     for(var i=0;i<myForm.single1.length;i++){            if(myForm.single1[0].checked==true){                stack1(svg,NAME);            }            else stack(svg,NAME);        }    });

下拉列表

<form name="single" action="" method=""  style="position:absolute;top:30px;left:20px;"><select id="test"  name="test"  style = "height:25px;font-size:15px;border-radius:10px">     <option   value="11" >人均GDP</option>            <option   value="0">第一产业</option>     <option   value="1">第二产业</option>  <option   value="2">第三产业</option>     <option   value="3">工业</option>    <option   value="4">建筑业</option>    <option   value="5">交通业</option> <option   value="6">批发和零售业</option>    <option   value="7">住宿和餐饮业</option>  <option   value="8">金融业</option>    <option   value="9">房地产业</option> <option   value="10">其它服务业</option>    </select></form>

//下拉列表的交互function single(){    var mySelect=document.single.test.value;    return mySelect;}function dropDown(gdpdata){    d3.selectAll("#test")        .on("change",function(){            //重新给地图涂色            fillMapColor(2013,gdpdata);            //改变渐变矩形的最大最小值            changeMinMax();        });}

滑动轴

<span style="position:absolute;top:415px;left:210px">1952</span><input type="range"  min="1952" max="2013" step="1" value="2013" id="limit" style="width:240px;position:absolute;top:420px;left:250px;"  /><span style="position:absolute;top:415px;left:500px">2013</span>

function slider(gdpdata){    d3.select("#limit")        .on("mousemove",function(d,i){            YEAR = this.value;            //重新给地图涂色            fillMapColor(YEAR,gdpdata);            //改变渐变矩形的最大最小值            changeMinMax();        });}

多选框

<form name="myform1" style="position:absolute;top:20px;left:1150px;line-height:12.5px;">            <input type="checkbox" class="checkclass" name="single" id="type1" checked="true" style="margin-bottom:0px"/>01            </br></br>            <input type="checkbox" class="checkclass" name="single" id="type2" checked="true" style="margin-bottom:0px"/>02            </br></br>            <input type="checkbox" class="checkclass" name="single" id="type3" checked="true" style="margin-bottom:0px"/>03            </br></br>            <input type="checkbox" class="checkclass" name="single" id="type4" style="margin-bottom:0px" />04            </br></br>            <input type="checkbox" class="checkclass" name="single" id="type5"  style="margin-bottom:0px"/>05            </br></br>      </form>

                //获取多选                function checkNum(){                    var array =new Array();                    for(var i=0;i<myform1.single.length;i++){                        if(myform1.single[i].checked==true)                            array[i]=1;                        else array[i]=0;                    }                    return array;                }                //多选的交互                 d3.selectAll(".checkclass")                    .on("click",function(){                        var array=checkNum();                    });