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

最新推荐文章于 2024-08-10 08:42:37 发布

偷得几日闲

最新推荐文章于 2024-08-10 08:42:37 发布

阅读量4.2k

点赞数

文章标签：布局前端

本文链接：https://blog.csdn.net/weixin_38837021/article/details/76474037

版权

单选框

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