• 通过div来实现条形图


    在d3中,我们一通过svg中rect来绘制条形图,其实也可以通过div简单的色块填充来实现。

    • 总体思路:
    • 添加div元素
    • 添加类(类中设置好css样式)
    • 或者style()直接设置css样式
    <style type="text/css">
    	div.bar {
    		 75px;
    		height: 100px;
    		display: inline-block;
    		background-color: blue;
    
    	}
    
    </style>
    <body>
    	
    </body>
    <script type="text/javascript">
    	var dataset=[1,2,3,4,5]
    	w=500;
    	h=300;
    	
    	d3.select("body")
    		.selectAll("div")
    		.data(dataset)
    		.enter()
    		.append("div")
    		.attr("class","bar")
    		// .classed("bar",false)
    		.style("width",100+"px")
    		.style("height",function(d,i){
    			return d*10+"px";
    		})
    		.style("margin-right",function(d,i){
    			return 2+"px";
    		})
    		.style("display","inline-block")
    		.style("background-color","pink")
    
    </script>
    
    
    • 解释:
    • classed()方法是d3中添加类和删除类的快捷方法,这里只是检验方法而已,
    • 可以在chrome下f12,看到style能直接设置css样式,并且覆盖类中设置的,优先级更高
  • 相关阅读:
    MySQLSource-Flume
    Flume
    Hive| ETL清洗& 查询练习
    Hive-04 压缩| 存储
    Hive-03 查询
    Hive-02 DDL| DML
    shell基本用法
    Hive-01 配置| 架构原理
    HDFS-HA高可用 | Yarn-HA
    react-路由和Ant design
  • 原文地址:https://www.cnblogs.com/caojunjie/p/7567465.html
Copyright © 2020-2023  润新知