数据可视化——D3直方图绘制

最新推荐文章于 2021-05-28 00:59:37 发布

Dusk-

最新推荐文章于 2021-05-28 00:59:37 发布

阅读量1.3k

点赞数

文章标签： js d3.js 可视化

本文链接：https://blog.csdn.net/weixin_46744761/article/details/117248448

版权

同样是绘制直方图，但本方法用了D3，需要安装tomcat并且在同级目录下有D3的包。

<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body> 
        <h2><center>当前热映电影的豆瓣评分</center></h2>   
    
        <script src="d3.v3.min.js"></script>
        <script>           
            var w=window.innerWidth 
            || document.documentElement.clientWidth 
            || document.body.clientWidth;

            var h=window.innerHeight
            || document.documentElement.clientHeight
            || document.body.clientHeight;
            w=w*0.98;
            h=h*0.9;

            var dataset=new Array(10);
            dataset=[8.8,7.4,6.6,3.7,6.7,8.2,2.8,7.2,8.1,7.4];
            var film=new Array(10);
            film=["阿凡达","又见奈良","21座桥","合法伴侣","哥斯拉大战金刚","波斯语课","日不落酒店","寻龙传说","你好李焕英","五尺天涯"];
            var color = d3.scale.category10();
            var svg=d3.select("body")
                    .append("svg")
                    .attr("width",w)
                    .attr("height",h);       
            svg.selectAll("rect")
                .data(dataset)
                .enter()
                .append("rect")
                .attr("x",function(d,i){
                    return (w/dataset.length)*i;
                })
                .attr("y",function(d){
                    return h-20-d*50;
                })
                .attr("width",(w/dataset.length)-10)
                .attr("height",function(d){
                    return 50*d;
                })
                .attr("fill",function(d,i){
                    return color(i);
                });
                
            svg.selectAll("text.title")
                .data(film)
                .enter()
                .append("text")
                .attr("font-size","18px")
                .attr("x",function(d,i){
                    return (w/dataset.length)*i;
                })
                .attr("y",h-20)
                .attr("dx",(w/dataset.length)/2-70)
                .attr("dy","18px")
                .text(function(d){
                    return d;
                });

            svg.selectAll("text.value")
                .data(dataset)
                .enter()
                .append("text")
                .attr("font-size","18px")
                .attr("x",function(d,i){
                    return (w/dataset.length)*i;
                })
                .attr("y",function(d){
                    return h-40-d*50;
                })
                .attr("dx",(w/dataset.length)/2-70)
                .attr("dy","18px")
                .text(function(d){
                    return d;
                });
        </script>
    </body>
</html>

在这里插入图片描述

Dusk-

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
数据可视化——D3直方图绘制

同样是绘制直方图，但本方法用了D3，需要安装tomcat并且在同级目录下有D3的包。<html> <head> <meta charset="UTF-8"> </head> <body> <h2><center>当前热映电影的豆瓣评分</center></h2> <script src="d3.v3.mi
复制链接

扫一扫