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;iif(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" >人均GDPoption>          
  <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">1952span>
<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">2013span>

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;iif(myform1.single[i].checked==true)
                            array[i]=1;
                        else array[i]=0;
                    }
                    return array;
                }
                //多选的交互 
                d3.selectAll(".checkclass")
                    .on("click",function(){
                        var array=checkNum();
                    });