D3.js 基于数据的绘图

绘制直线图

条形图实际上是矩形,而 HTML 的 div 元素是绘制矩形的最简单手段。(对于浏览器来说,HTML 中的一切元素都可以哟ing来表示矩形)。

所以我们可以定义一个叫 bar 的 div 类,用于存放图表的公共属性。(除了高度,其他的属性应该是共享的)

div.bar {
                display: inline-block;
                width: 20px;
                height: 75px;    /*最后这里会被覆写*/
                margin-right: 2px;
                background-color: green;

设定属性

attr() 用于设定HTML 元素的属性和值。我们要给我们生成的 div 中添加 bar 类,需要这样写:

.attr("class","bar")

 关于类

元素的类作为 HTML 属性存在于标记代码中,同时 CSS 规则也可以引用它。除了为元素设定类以外,直接给元素应用样式也可以。(这里不太懂,下次遇到案例再写上)

猜你喜欢

转载自www.cnblogs.com/guangluwutu/p/9902682.html