d3設定line長度 SVG 介面方法

2021-10-18 18:42:11 字數 4194 閱讀 1307

svg中的一些dom介面

在使用指令碼操作svg時,有時候希望能計算一些沒有被直接定義的幾何屬性。比如不管文字怎麼變化,都能畫乙個更好匹配文字區域的矩形。

1. svg element(svg命名空間中的任何元素)

方法或屬性

說明.ownersvgelement()

返回最近的祖先svg元素,如果是在頂級svg呼叫,則返回null

.viewportelement()

返回建立當前元素viewport的svg,pattern,symbol或marker元素

2. svg locatable(佔據座標空間的元素或含有變換屬性的元素:圖形元素、g、svg)

方法或屬性

說明.nearestviewportelement

建立當前元素viewport的svg,pattern,symbol或marker元素

.farthestviewportelement

包含當前元素的頂級svg元素

.getbbox()

以svgrect物件的形式返回當前元素的位置和邊界,包含x,y,width,height屬性,代表能包裹整個圖形的最小矩形框,不受筆畫寬度,裁剪、蒙版濾鏡影響

.getctm()

返回svgmatrix物件,代表從當前元素的座標系統到nearestviewportelement座標系統的變換

.getscreenctm

返回svgmatrix物件,代表從當前元素到文件最頂級螢幕座標或客戶端座標之間的變換矩陣。這個方法在處理事件時可以很方便的轉化滑鼠/指標使用的座標系統和圖形系統

.gettransformtoelement(svgelement)

返回svgmatrix物件,代表當前元素座標到指定元素座標之間的變換

3. svg transform(能使用transform的任何元素)

方法或屬性

說明.transform

代表定義在元素上的變換原始值和動畫過程中的值的svganimatedtransformlist

4. svg stylable(等使用style的任何元素)

方法或屬性

說明.style

返回乙個cssstyledeclaration元素,代表內聯在元素上的樣式

5. svg svgelement(svg元素)

方法或屬性

說明.suspendredraw(maxwrittimeinmilliseconds)

告訴瀏覽器在繪製圖形時暫停指定時間(最長一分鐘).如果希望做很多修改,但在最後一期應用,則可以使用這個方法。該方法返回乙個數字id,可以稍後傳給unsuspendredraw

.unsuspendredraw(suspendid)

取消id代表的由suspendredraw建立的暫停

.unsuspendredrawall()

取消svg上所有的由suspendredraw建立的暫停

.pauseanimations()

暫停svg上所有的smil動畫時鐘

.unpauseanimations()

恢復svg上所有的smil動畫時鐘

.animationspaused()

返回true或false,代表動畫是否由上面的方法暫停

.getcurrenttime()

返回smil動畫的時鐘當前值。正常情況下這個值為文件載入之後的秒數,暫停動畫會影響這個值

.setcurrenttime(timeinseconds)

修改smil動畫時鐘值,影響所有的動畫

.getintersectionlist(rectangle,referenceelement)

返回元素列表,代表在指定座標系統下和指定的矩形有重疊並且這些元素全是指定元素的子元素。

.getenclosurelist(rectangle,referenceelements)

與getintersectionlist類似,區別在於這個只返回完全在矩形中的元素

.checkintersection(element,rectangle)

返回true或false,代表svg元素座標系統下,指定元素與rect是否有重疊

.checkenclosure(element,rectangle)

返回true或false,代表svg元素座標系統下,指定元素是否完全被包含在指定矩形範圍內

.createsvg***

建立各種資料物件(svgpoint,svgangle,svgmatrix)等

6. svg useelement(use元素)

方法或屬性

說明.instanceroot

包含use元素代表的圖形dom樹最頂層節點

7. svg pathelement(path元素)

方法或屬性

說明.gettotallength()

以使用者座標返回計算後的路徑長度,不同客戶端中不一定完全一樣,因為曲線會做取捨

.getpointatlength(distance)

返回以使用者座標計算的距離起點distance單位的點,包含x和y屬性

8. svg pathdata(path元素以及其他支援路徑資料屬性的元素,如animatemotion)

方法或屬性

說明.pathseglist

包含乙個代表路徑各個部分的物件列表

.normalizedpathseglist

簡化版的路徑各部分列表,每個部分被轉化為絕對座標下的移動、畫線、曲線或關閉路徑等命令

9. svg animatedpoints(polygon和polyline元素)

方法或屬性

說明.points

返回svgpointlist,代表與元素相關的點的列表

10. svg textcontentelement(svg命名空間中的任何元素)

方法或屬性

說明.getnumberofchars()

返回元素中字元總數,包括tspan元素,多位元組字元會用utf-16呈現然後計數

.getcomputedtextlength()

返回在使用者座標系下應用了所有css屬性和dx,dy屬性之後包含整個文字的長度,不包括在textlength屬性基礎上做的調整

.getsubstringlength(charnum,nchars)

返回擷取的字串一部分的長度,從charnum開始,擷取nchars個,如果不足nchars個則擷取到字串結尾為止

.getstartpositionofchar(charnum)

返回乙個帶有x和y屬性的svgpoint物件,表示在使用者座標系中指定字元的起始位置,字元與起始位置的相對關係取決於書寫模式(左到右,上到下)。預設情況下從左到右,起始點位於字元最左側基線的位置

.getendpositionofchar(charnum)

與getstartpositionofchar類似,返回結束時的基線位置

.getextendofchar(charnum)

與getbbox方法類似,這個是返回單個字元的包裹矩形框

.getrotationofchar(charnum)

返回指定字元在經過所有變換之後的旋轉角度(以度為單位)

.getcharnumatposition(point)

返回指定位置的字元索引,如果指定點沒有字元則返回-1

11. elementtimecontrol和svganimationelement(svg動畫元素animate\set\animatetransform\animatemotion)

方法或屬性

說明.targetelement

svg動畫修改的svg元素

.beginelement()

如果動畫沒有被restart屬性never或whennotactive阻止的話,立即開始

.beginelementat(offset)

在offset秒之後開始動畫,如果offset為負值,則立即開始

.endelement()

立即結束當前正在執行的動畫

.endelementat(offset)

在offset秒之後結束當前動畫

.getstarttime()

如果動畫正在進行,則返回相對svg時鐘的開始時間,如果動畫還沒有開始返回將要開始的時間

.getcurrenttime()

返回svg動畫時鐘的當前時間(秒)

.get******duration()

返回動畫每一輪的時長(dur屬性),如果沒有定義則丟擲錯誤

d3設定line長度 在mpld3中設定刻度標籤

我試圖用一些資料建立乙個簡單的條形圖 這裡是硬編碼的,但我會在某個時候從檔案中讀入它 到目前為止,我可以得到條形圖,但我希望屬性 feature name 出現在每個條下面。現在,我只知道1到16號。我能做什麼使每個功能條下的每個功能?在 我的 import matplotlib.pyplot as...

D3能做什麼

d3.js是乙個js庫,用於建立資料視覺化圖形,但這麼說來還是小看它了。d3是個很不錯的軟體,它能幫你生成和操作帶資料的文件!為此,要 把資料載入到瀏覽器的記憶體空間 把資料繫結到文件中的元素,根據需要建立新元素 解析每個元素的範圍資料 bound datum 並為其設定相應視覺化屬性,實現元素的變...

D3 函式和模組

1.什麼是函式 a.函式是完成一定功能的程式段的封裝,使用者無需理解函式是如何實現,只需了解函式的使用方法 2.什麼是模組 包 庫 a.模組是由多個函式和多個變數,物理上,模組對應py檔案 b.包是多個模組的集合,物理上對應包含多個py檔案的資料夾 c.庫是多個包的集合,物理上對應包含多個包的資料夾...