d3.js:數據可視化利器之 修改文檔：DOM操做符

style: CSS樣式操做符

style()操做符用來設置或獲取選擇集中各DOM元素的CSS樣式：

1. selection.style(name[,value[,priority]])

style()操做符有三個參數：

• name: 樣式名稱字符串，必須
• value：指定樣式新的值，可選
• priority：優先級，能夠是null或字符串"important"，可選

讀取樣式當前值

若是沒有指定參數value，那麼style()將返回選擇集中第一個DOM元素指定樣式的 計算值。請注意，這時只返回第一個元素的樣式！

爲樣式設置新值

若是參數value是一個具體值，那麼style()將選擇集中全部DOM元素的指定 樣式統一設置爲該值。當value爲null值時，將清除該樣式值。

若是參數value是一個訪問器函數，那麼style()將依次對選擇集中的每個 DOM元素分別執行該函數，並使用其返回值來設置當前DOM元素指定樣式的值。

同時設定多個樣式

若是有多個樣式須要同時設置，能夠直接傳入一個JSON對象：

1. selection.style({'stroke': 'black', 'stroke-width': 2})

attr: 屬性操做符

attr()操做符用來設置或獲取選擇集中各DOM元素的屬性：

1. selection.attr(name[,value])

attr()操做符有兩個參數：

• name：指定要操做的屬性名稱，必須
• value：指明要爲該屬性設置的新值或訪問器函數，可選

讀取屬性當前值

若是沒有指定參數value，那麼attr()將返回選擇集中第一個 DOM元素指定屬性的當前值。

爲屬性設置新值

參數value能夠是一個具體值，這時attr()將選擇集中全部DOM元素的指定屬性值 統一設置爲該值。

參數value也能夠是一個訪問器函數，這時attr()將依次對集合中的每個元素 分別執行該函數，並使用其返回值做爲當前處理DOM元素指定屬性的值。

html：html內容操做符

html()操做符的實現基於DOM元素的innerHTML屬性，所以設置 這個值將徹底替換選擇集中每個DOM元素的所有內容：

1. selection.html([value])

參數value是可選的，用來替換當前內容。

讀取html內容

若是沒有指定參數value，那麼html()操做符將返回選擇集中第一個 DOM元素的HTML內容。

設置html內容

若是參數value是一個具體值，那麼html()操做符將選擇集中全部 DOM元素的HTML內容統一設置爲該值。

若是參數value是一個訪問器函數，那麼將依次對選擇集中的每個 DOM元素分別執行該函數，並使用其返回值來設置當前DOM元素的HTML內容。

text：文本內容操做符

text()操做符的實現基於DOM元素的textContent屬性，所以設置 這個值將徹底替換選擇集中每個DOM元素的所有內容：

1. selection.text([value])

參數value是可選的，用來替換當前內容。

讀取文本內容

若是沒有指定參數value，那麼text()操做符將返回選擇集中第一個 DOM元素的文本內容。

設置文本內容

若是參數value是一個具體值，那麼text()操做符將選擇集中全部 DOM元素的文本內容統一設置爲該值。

若是參數value是一個訪問器函數，那麼將依次對選擇集中的每個 DOM元素分別執行該函數，並使用其返回值來設置當前DOM元素的文本內容。

append：追加操做符

append()操做符向選擇集中的每個DOM元素追加一個子元素：

1. selection.append(name)

name參數能夠是一個HTML標籤名，這時append()將爲選擇集中的每一個 DOM元素使用這個標籤名建立新元素，並向當前DOM對象追加該子元素。

name參數也能夠是一個訪問器函數，這時append()將爲選擇集中 的每一個DOM元素執行這個函數，並將其返回的DOM對象追加爲當前DOM元素的子元素。

須要指出的是，append()返回的是一個不一樣的選擇集，其內容是新追加的這些 DOM元素：

示例地址：http://www.hubwiz.com/course/54fd40cfe564e50d50dcf284/

insert：插入操做符

insert()操做符向選擇集中的每個DOM元素，在指定子元素以前插入一個新元素：

1. selection.insert(name[,before])

和append()同樣，參數name能夠是一個HTML標籤名或者一個 訪問器函數。位置參數before則使用與name一樣的方式 指定一個用來定位的子元素。

當省略位置參數before時，新建立的元素將插入到最後，等效於append()。

一樣地，insert()返回的是一個不一樣的選擇集，其內容是新插入的這些 DOM元素：

remove：刪除操做符

remove()方法將選擇集中的所有DOM元素從當前文檔中移除：

1. selection.remove()

須要指出的是，remove()操做符並無銷燬這些移除的DOM元素，而僅僅是將 它們從當前文檔中摘除，所返回的選擇集內容沒有發生變化：

另外，當前d3沒有提供專門的API將這些移除的DOM元素從新掛接到DOM樹上。若是你須要 這個功能，可使用append()或insert()操做符。

參考資料：http://www.hubwiz.com/