style: CSS樣式操作符
style()操作符用來設置或獲取選擇集中各DOM元素的CSS樣式:
- selection.style(name[,value[,priority]])
style()操作符有三個參數:
- name: 樣式名稱字符串,必須
- value:指定樣式新的值,可選
- priority:優先級,可以是null或字符串"important",可選
讀取樣式當前值
如果沒有指定參數value,那么style()將返回選擇集中第一個DOM元素指定樣式的 計算值。請注意,這時只返回第一個元素的樣式!
為樣式設置新值
如果參數value是一個具體值,那么style()將選擇集中所有DOM元素的指定 樣式統一設置為該值。當value為null值時,將清除該樣式值。
如果參數value是一個訪問器函數,那么style()將依次對選擇集中的每一個 DOM元素分別執行該函數,並使用其返回值來設置當前DOM元素指定樣式的值。
同時設定多個樣式
如果有多個樣式需要同時設置,可以直接傳入一個JSON對象:
- selection.style({'stroke': 'black', 'stroke-width': 2})
attr: 屬性操作符
attr()操作符用來設置或獲取選擇集中各DOM元素的屬性:
- selection.attr(name[,value])
attr()操作符有兩個參數:
- name:指定要操作的屬性名稱,必須
- value:指明要為該屬性設置的新值或訪問器函數,可選
讀取屬性當前值
如果沒有指定參數value,那么attr()將返回選擇集中第一個 DOM元素指定屬性的當前值。
為屬性設置新值
參數value可以是一個具體值,這時attr()將選擇集中所有DOM元素的指定屬性值 統一設置為該值。
參數value也可以是一個訪問器函數,這時attr()將依次對集合中的每一個元素 分別執行該函數,並使用其返回值作為當前處理DOM元素指定屬性的值。
html:html內容操作符
html()操作符的實現基於DOM元素的innerHTML屬性,因此設置 這個值將完全替換選擇集中每一個DOM元素的全部內容:
- selection.html([value])
參數value是可選的,用來替換當前內容。
讀取html內容
如果沒有指定參數value,那么html()操作符將返回選擇集中第一個 DOM元素的HTML內容。
設置html內容
如果參數value是一個具體值,那么html()操作符將選擇集中所有 DOM元素的HTML內容統一設置為該值。
如果參數value是一個訪問器函數,那么將依次對選擇集中的每一個 DOM元素分別執行該函數,並使用其返回值來設置當前DOM元素的HTML內容。
text:文本內容操作符
text()操作符的實現基於DOM元素的textContent屬性,因此設置 這個值將完全替換選擇集中每一個DOM元素的全部內容:
- selection.text([value])
參數value是可選的,用來替換當前內容。
讀取文本內容
如果沒有指定參數value,那么text()操作符將返回選擇集中第一個 DOM元素的文本內容。
設置文本內容
如果參數value是一個具體值,那么text()操作符將選擇集中所有 DOM元素的文本內容統一設置為該值。
如果參數value是一個訪問器函數,那么將依次對選擇集中的每一個 DOM元素分別執行該函數,並使用其返回值來設置當前DOM元素的文本內容。
append:追加操作符
append()操作符向選擇集中的每一個DOM元素追加一個子元素:
- selection.append(name)
name參數可以是一個HTML標簽名,這時append()將為選擇集中的每個 DOM元素使用這個標簽名創建新元素,並向當前DOM對象追加該子元素。
name參數也可以是一個訪問器函數,這時append()將為選擇集中 的每個DOM元素執行這個函數,並將其返回的DOM對象追加為當前DOM元素的子元素。
需要指出的是,append()返回的是一個不同的選擇集,其內容是新追加的這些 DOM元素:
示例地址:http://www.hubwiz.com/course/54fd40cfe564e50d50dcf284/
insert:插入操作符
insert()操作符向選擇集中的每一個DOM元素,在指定子元素之前插入一個新元素:
- selection.insert(name[,before])
和append()一樣,參數name可以是一個HTML標簽名或者一個 訪問器函數。位置參數before則使用與name同樣的方式 指定一個用來定位的子元素。
當省略位置參數before時,新創建的元素將插入到最后,等效於append()。
同樣地,insert()返回的是一個不同的選擇集,其內容是新插入的這些 DOM元素:
remove:刪除操作符
remove()方法將選擇集中的全部DOM元素從當前文檔中移除:
- selection.remove()
需要指出的是,remove()操作符並沒有銷毀這些移除的DOM元素,而僅僅是將 它們從當前文檔中摘除,所返回的選擇集內容沒有發生變化:
另外,當前d3沒有提供專門的API將這些移除的DOM元素重新掛接到DOM樹上。如果你需要 這個功能,可以使用append()或insert()操作符。