JavaScript d3.js入门学习_绘制一个与鼠标动作有关的饼图

最新推荐文章于 2024-04-07 18:58:35 发布

Bi9R!ver

最新推荐文章于 2024-04-07 18:58:35 发布

阅读量323

点赞数

分类专栏： JavaScript 文章标签： js 可视化 javascript html5 html

本文链接：https://blog.csdn.net/weixin_46192722/article/details/108047530

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

//在每一项的设置里面，匿名函数很好用。
//能够映射到每一个元素，类似iterater？
//自动iterater？
<html>
    <head>
        <meta charset="utf-8">
    </head>

    <body>
        <script src="https://d3js.org/d3.v3.min.js"></script>
		//之前两次的d3.js不能直接用，跟教程不太匹配…就直接在线用吧！可能是路径啥的不太对…
        <script>
            var w = window.innerWidth;
            var h = window.innerHeight;
            w=w*0.98;
            h=h*0.9;
            
            var dataset=[["农业",90],["工业",200],["第三产业",400]];
            //这个就是最简单的一个原生数据集。
            
            var pie = d3.layout.pie()
                        .value(function(d){
                            return d[1];
                        })

            var piedata=pie(dataset);
			//使用原生数据集的每个数据的第二个项目进行制作用来绘制饼图的参考数据
            
            var arc=d3.svg.arc()
                            .innerRadius(100)
                            .outerRadius(300);
			//这个是绘制一个弧，分别设置内径和外径
			
            var svg=d3.select("body")
                        .append("svg")
                        .attr("width",w)
                        .attr("height",h);
                        
			//下面的设置了这个图的一些基本属性，有一些是在控制台里可以看数据的。
            svg.selectAll("path")
                .data(piedata)
                .enter()//装入
                .append("path")
                .attr("d",function(d){
                    console.log(piedata);
                    return arc(d);
                })
                .attr("fill","yellow")
                .attr("stroke","blue")
                .attr("transform","translate("+w/2+","+h/2+")")
                .on("mouseover",function(d){
                    d3.select(this)//this就是当前这个项目，能够指到当前这个项目这里。
                        .attr("fill","green");
                })
                .on("mouseout",function(d){
                    d3.select(this)//this就是当前这个项目，能够指到当前这个项目这里。
                        .attr("fill","yellow");
                });
			
			//饼图的每一个弧段中间要有数字。
            svg.selectAll("text")
                .data(piedata)
                .enter()
                .append("text")
                .attr("fill","blue")
                .attr("text-anchor","middle")
                .attr("transform",function(d){
                    var x=arc.centroid(d)[0];
                    var y = arc.centroid(d)[1];
                    return "translate("+(w/2+x)+","+(h/2+y)+")"
                    //因为上面，我们的饼图中心已经平移到w/2和h/2的地方了，
                    //所以这里我们的中心也要平移到这两个地方。
                    //上面的centroid是设置数字的显示位置，是要显示在每一个对应弧段的中心
                    //返回两个值，一个横坐标一个纵坐标
                    //还有上面那个text-anchor的middle是指这一串字符串的锚点，也就是中心位置
                    //上面是把锚点放在了这一串字符串的中心。
                })
                .text(function(d){
                    return d.value;
                    //这个是显示数字。
                });
        </script>
    </body>
</html>

Bi9R!ver

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript d3.js入门学习_绘制一个与鼠标动作有关的饼图

//在每一项的设置里面，匿名函数很好用。//能够映射到每一个元素，类似iterater？//自动iterater？<html> <head> <meta charset="utf-8"> </head> <body> <script src="https://d3js.org/d3.v3.min.js"></script> //之前两次的d3.js不能直接用
复制链接

扫一扫

专栏目录