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元素:

append

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

insert:插入操作符

insert()操作符向選擇集中的每一個DOM元素,在指定子元素之前插入一個新元素:

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

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

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

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

insert

remove:刪除操作符

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

  1. selection.remove()

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

remove

另外,當前d3沒有提供專門的API將這些移除的DOM元素重新掛接到DOM樹上。如果你需要 這個功能,可以使用append()insert()操作符。

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM