目錄

• 目錄
• 單選框
• 下拉列表
• 滑動軸
• 多選框

單選框

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();
                    });