馬峰 劉景義 項建
【摘要】為了滿足石油物探數據網頁圖形展示交互的需求,提出了基于D3.js技術的物探數據網頁圖形展示交互的算法,設計并開發了物探數據圖形展示交互的功能和頁面,為物探數據管理提供了基于Web的圖形展示交互的解決方法,實現了基于網頁的物探數據圖形分析和質量控制,大大提高了物探數據在網頁中的圖形展示的易用性和交互性,并在實際應用中取得了良好的效果。
【關鍵詞】D3.js技術;圖形展示;石油物探數據;
1 引言
隨著二十世紀初網頁技術的發展,越來越多的系統開始采用WEB技術開發滿足WEB可視化需求的軟件功能[1] 。為了實現WEB可視化需求,大部分公司將原有的C++、C#、JAVA圖形展示程序封裝成ActiveX插件并嵌入到網頁中使用,但其缺陷是僅支持IE瀏覽器,需要安裝插件或證書;如果系統直接輸出圖片,則只能查看而缺乏可交互性。
D3.js技術是基于數據的JavaScript庫文件[1],它能通過使用HTML、CSS、SVG實現基于數據的圖形展示和交互功能,并且大部分瀏覽器都支持該技術,技術兼容性有保障。D3.js可以實現所有二維、三維圖形的展示功能,在GIS、工業控制、智能分析上已經有了較廣泛的應用。
石油物探數據主要是在石油勘探生產過程中所形成的數據量龐大、格式復雜的地震數據,包括地震原始、處理、解釋數據等,數據量可從幾十KB到TB級以上。隨著Web技術的發展,石油勘探數據管理系統對物探數據的圖形展示和交互功能提出了更高的要求,如何將物探數據在B/S模式下的Web客戶端實現圖形的展示及與用戶交互,支持用戶對物探數據進行圖形操作、分析與質量控制,是勘探數據管理系統研發人員需要研究和解決的重要課題。
通過對石油物探數據圖形技術的研究,系統研發人員設計并開發了基于D3.js技術的石油物探數據網頁圖形展示交互系統,實現了石油物探數據在Web客戶端的圖形展示與交互功能,滿足了石油勘探數據管理系統數據質量控制的可視化需求。
2 系統設計
2.1 功能架構
基于D3.js技術的物探數據網頁圖形展示交互功能采用MVC架構,分別為數據持久層(Model)、視圖界面層(View)、控制邏輯層(Controller)。數據持久層運用JPA技術將物探文件數據或表數據生成持久化對象;視圖界面層采用D3.js技術實現物探數據的點、線、面的展示和放大、縮小、移動、顏色的交互操作;控制邏輯層實現數據的解析、轉換、查詢、排序,以JSON格式輸出到視圖界面層。功能架構見圖1。
2.2 流程設計
物探數據格式以JSON輸出到View層后,如果數據不標準,則需要對數據先進行轉換處理,例如對數據進行線號排序、空值處理、格式轉換等。
數據處理后,利用D3.js技術,對這些數據進行綁定、坐標轉換,實現點、線、面的展示。
數據展示后,利用D3.js技術,實現數據與圖形的交互功能,即系統可根據用戶設置的圖形顏色、實時坐標、線號、關聯關系等數據進行圖形交互展示。
2.3 算法與技術應用研究
采用冒泡排序算法,按照線號對數據進行排序。
采用Transform算法,根據橫、縱坐標,實現點、線、面的位移、比例尺縮小、旋轉的圖形處理。
采用抽稀算法,對測點進行抽取,實現數據的最小化。
采用角度變換算法,根據線號,按測線角度進行平面旋轉。
3 圖形展示與交互界面
采用D3.js技術,實現了物探SPS(+)數據、導航數據、速度數據、解釋數據的二維圖像展示,以及圖形放大、縮小、移動、顏色設置、坐標實時展示的交互功能。
SPS(+)數據主要由炮點文件、接收點文件、關系文件三種數據組成,為了對數據進行質量控制,用戶通常需要對其進行圖形展示,對炮點、接收點位置和它們之間的對應關系進行動態瀏覽和交互操作。使用D3.js技術實現的SPS數據展示功能界面如圖2所示。
PS數據展示中,采用了冒泡算法對炮點、接收點數據的線號進行了排序處理。算法如下:
炮點、接收點的橫縱坐標一般是十位和八位整數,需要對坐標進行轉換,以便將炮點、接收點圖形投影到網頁視窗范圍內,同時,還需要設置可放大縮小的等級。
當鼠標移動到或點擊該炮點時,用戶可查看該炮點對應的所有接收點分布,即在圖中通過接收點的顏色變化展示其位置及分布。
導航數據主要由線號、點號、橫坐標、縱坐標、經緯度、高程等數據組成。用戶需要通過與圖形交互對測線進行放大、縮小、移動、顏色、坐標設置等操作,對數據進行圖形分析和質量檢查。使用D3.js技術實現的導航數據展示功能界面如圖3所示。
地震處理SEGY數據可基于D3.JS實現平面底圖的查看,從而控制Inline、Crossline、任意線的剖面繪制與顯示。通過關聯井位及劃線操作,可對地震SEGY數據進行剪裁操作。如圖4所示。
使用D3.js技術,還可實現速度數據的曲線展示以及解釋數據的面顯示。
4 結束語
基于D3.js技術的石油物探數據網頁圖形展示交互系統實現了物探SPS(+)數據、導航數據、速度數據、解釋數據的二維圖像展示和放大、縮小、移動、顏色設置、坐標實時展示的交互功能,基本滿足了用戶對物探數據網頁圖形展示與交互的需求。通過該系統,用戶能夠快速、高效地查看地震炮檢點的關系,檢查地震測線的數據質量。
未來基于D3.js技術的網頁圖形展示技術還需要進一步的研究和應用,以便滿足更多物探數據的圖形展示和場景交互操作需求。
參考文獻:
1) Bostock M,Ogievetsky V, Heer J.D3:Data-driven documents[J].IEEE Transactions on Visualization and Computer Graphics,2011,17(12):2301-2309
2) 胡光強 王洪.基于J2EE的網頁上可交互圖形的設計與實現北京:北京交通大學軟件學院,2005, 32(3):1-3
3) 張運良.使用D3.js的知識組織系統Web動態交互可視化功能實現.北京:中國科學技術信息研究所,2013,32(5):132-136