D3.js 基于数据的绘图

Posted 2021-01-17 雪原那么远

绘制直线图

条形图实际上是矩形，而 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 规则也可以引用它。除了为元素设定类以外，直接给元素应用样式也可以。（这里不太懂，下次遇到案例再写上）