D3临摹作业(西安交大国家艺术基金数据可视化培训第21天)

最新推荐文章于 2022-06-14 22:21:40 发布

fox541

最新推荐文章于 2022-06-14 22:21:40 发布

阅读量197

点赞数

分类专栏： ASM 文章标签： D3

本文链接：https://blog.csdn.net/fox541/article/details/93143861

版权

ASM 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

第六章 D3动画与交互

第一节 D3动画

动画的效果在D3中被称为：·Transition

方法	方式	特点	代码
transition()		需要给出过渡变化前后不同的样式	.attr("fill","red") .transition() .attr("fill","blue")
duration()			.transition() .duration(2000)
ease()	linear circle elastic bounce		.transition() .ease("bounce")
delay()			// 把所有圆圈改变半径 d3.selectAll("circle").transition() // 定义动画 .duration(750) // 动画持续时间 .delay(function(d, i) { return i * 10; }) // 元素动画要延时多少时间开始 .attr("r", function(d) { return Math.sqrt(d * scale); }); // 设置最后效果

.案例：直方图生长动画

第二节图形交互

三种交互工具：鼠标、键盘、触屏
交互类型：定时器、过渡、插值器、缓动、事件分派、拖动、缩放

案例：鼠标提示框交互

<html>  
  <head>   
        <title>交互-鼠标交互提示框图</title> 
        <style>
              .tooltip{
                 font-family: simsun;
                 font-size: 14px;
                 width: 120;
                 height: auto;
                 position: absolute;     /*设置为绝对定位*/
                 text-align: center;
                 border-style: solid; 
                 border-width: 1px;
                 background-color: white;
                 border-radius: 5px;
              }
        </style>
 
  </head> 
  <body>
    <script src="../D3/d3.v4.min.js" charset="utf-8"></script> 
        
    <script>  
  var w=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;
            var h=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;
            var width = w*0.98;
            var height =h*0.96;
            var dataset = [["Chrome",39.49],["IE",29.06],["QQ",4.84],["2345",4.28],["搜狗高速",4.19],["猎豹",2.24],["其他",15.91]];
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", width)
                        .attr("height", height);
            var pie = d3.pie()
                        .value(function(d){return d[1];});
            var piedata = pie(dataset);
            var outerRadius = 150;  //外半径
            var innerRadius = 0;    //内半径，为0则中间没有空白
            var arc = d3.arc()  //弧生成器
                        .innerRadius(innerRadius)   //设置内半径
                        .outerRadius(outerRadius);  //设置外半径
            var color = d3.scaleOrdinal(d3.schemeCategory10);
            var arcs = svg.selectAll("g")
                          .data(piedata)
                          .enter()
                          .append("g")
                          .attr("transform","translate("+ (width/2) +","+ (height/2) +")");             
            arcs.append("path")//每个g元素都追加一个path元素用绑定到这个g的数据d生成路径信息
                .attr("fill",function(d,i){
                    return color(i);
                })
                .attr("d",function(d){
                    return arc(d);//将角度转为弧度（d3使用弧度绘制）
                });
            
            arcs.append("text")
                .attr("transform",function(d){
                    var x = arc.centroid(d)[0] * 1.1;
                    var y = arc.centroid(d)[1] * 1.1;
                    return "translate(" + x + "," + y + ")";
                })
                .attr("text-anchor","middle")
                .attr("font-size",function(d) { 
                    return d.data[1] + "px"; 
                })
                .text(function(d){              
                    return d.value + "%";
                })


                .on("mouseover",function(d,i){
                    if(d.data[1]<10){
                        d3.select(this)
                        .attr("font-size",24);
                    }
                })

                .on("mouseout",function(d,i){
                    if(d.data[1]<10){
                        d3.select(this)
                        .attr("font-size",function(d) { 
                            return d.value + "px"; 
                        });                         
                    }
                });

            //添加一个提示框
            var tooltip = d3.select("body")
                                .append("div")
                                .attr("class","tooltip")
                                .style("opacity",0.0);  //块元素设置透明
            
            arcs.on("mouseover",function(d){  //用鼠标的坐标为提示框定位                  
                    tooltip.html(d.data[0] + "浏览器市场份额" + "<br />" + d.data[1]+"%")
                        .style("left", (d3.event.pageX) + "px")
                        .style("top", (d3.event.pageY + 20) + "px")
                        .style("opacity",1.0);
                    d3.select(this)
                      .style("cursor","move");
                })
                .on("mousemove",function(d){                
                    tooltip.style("left", (d3.event.pageX) + "px")
                            .style("top", (d3.event.pageY + 20) + "px");
                })
                .on("mouseout",function(d){         
                    tooltip.style("opacity",0.0);
                });
             
    </script> 
   </body>
</html>

案例：键盘交互

<html>  
  <head>   
        <title>交互-键盘交互</title>       
  </head> 
  <body>
    <script src="../D3/d3.v3.min.js" charset="utf-8"></script> 
        
   <h4>请按一下ESC、Enter和F2试试键盘交互……</h4>
        <script type="text/javascript" language=JavaScript charset="UTF-8">
            var width = 500, height = 500;
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width",width)
                        .attr("height",height);

            var circle = svg.append("circle")
                            .attr("cx", 100)
                            .attr("cy", 100)
                            .attr("r", 45)
                            .style("fill","green");
                        
            document.onkeydown=function(event){
                    var e = event || window.event || arguments.callee.caller.arguments[0];
                    if(e && e.keyCode==27){ // 按 Esc 
                        //要做的事情
                        alert('KeyCode=27（ESC）');
                        circle.style("fill","yellow")
                      }
                    if(e && e.keyCode==113){ // 按 F2 
                         //要做的事情
                        alert('KeyCode=113（F2）');
                       }            
                     if(e && e.keyCode==13){ // enter 键
                         //要做的事情
                        alert('KeyCode=13（Enter）');
                    }
                }; 
        </script>

   </body>
</html>

fox541

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
D3临摹作业(西安交大国家艺术基金数据可视化培训第21天)

第六章 D3动画与交互第一节 D3动画动画的效果在D3中被称为：·Transition方法方式特点代码 transition() 需要给出过渡变化前后不同的样式 .attr("fill","red") .transition() .attr("fill","blue") duration() ...
复制链接

扫一扫