1. 程式人生 > >D3.js 基於資料的繪圖

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 規則也可以引用它。除了為元素設定類以外,直接給元素應用樣式也可以。(這裡不太懂,下次遇到案例再寫上)