馬峰　劉景義　項建

【摘要】為了滿足石油物探數(shù)據(jù)網(wǎng)頁圖形展示交互的需求，提出了基于D3.js技術的物探數(shù)據(jù)網(wǎng)頁圖形展示交互的算法，設計并開發(fā)了物探數(shù)據(jù)圖形展示交互的功能和頁面，為物探數(shù)據(jù)管理提供了基于Web的圖形展示交互的解決方法，實現(xiàn)了基于網(wǎng)頁的物探數(shù)據(jù)圖形分析和質(zhì)量控制，大大提高了物探數(shù)據(jù)在網(wǎng)頁中的圖形展示的易用性和交互性，并在實際應用中取得了良好的效果。

【關鍵詞】D3.js技術；圖形展示；石油物探數(shù)據(jù)；

1 引言

隨著二十世紀初網(wǎng)頁技術的發(fā)展，越來越多的系統(tǒng)開始采用WEB技術開發(fā)滿足WEB可視化需求的軟件功能[1] 。為了實現(xiàn)WEB可視化需求，大部分公司將原有的C++、C#、JAVA圖形展示程序封裝成ActiveX插件并嵌入到網(wǎng)頁中使用，但其缺陷是僅支持IE瀏覽器，需要安裝插件或證書；如果系統(tǒng)直接輸出圖片，則只能查看而缺乏可交互性。

D3.js技術是基于數(shù)據(jù)的JavaScript庫文件[1]，它能通過使用HTML、CSS、SVG實現(xiàn)基于數(shù)據(jù)的圖形展示和交互功能，并且大部分瀏覽器都支持該技術，技術兼容性有保障。D3.js可以實現(xiàn)所有二維、三維圖形的展示功能，在GIS、工業(yè)控制、智能分析上已經(jīng)有了較廣泛的應用。

石油物探數(shù)據(jù)主要是在石油勘探生產(chǎn)過程中所形成的數(shù)據(jù)量龐大、格式復雜的地震數(shù)據(jù)，包括地震原始、處理、解釋數(shù)據(jù)等，數(shù)據(jù)量可從幾十KB到TB級以上。隨著Web技術的發(fā)展，石油勘探數(shù)據(jù)管理系統(tǒng)對物探數(shù)據(jù)的圖形展示和交互功能提出了更高的要求，如何將物探數(shù)據(jù)在B/S模式下的Web客戶端實現(xiàn)圖形的展示及與用戶交互，支持用戶對物探數(shù)據(jù)進行圖形操作、分析與質(zhì)量控制，是勘探數(shù)據(jù)管理系統(tǒng)研發(fā)人員需要研究和解決的重要課題。

通過對石油物探數(shù)據(jù)圖形技術的研究，系統(tǒng)研發(fā)人員設計并開發(fā)了基于D3.js技術的石油物探數(shù)據(jù)網(wǎng)頁圖形展示交互系統(tǒng)，實現(xiàn)了石油物探數(shù)據(jù)在Web客戶端的圖形展示與交互功能，滿足了石油勘探數(shù)據(jù)管理系統(tǒng)數(shù)據(jù)質(zhì)量控制的可視化需求。

2 系統(tǒng)設計

2.1 功能架構(gòu)

基于D3.js技術的物探數(shù)據(jù)網(wǎng)頁圖形展示交互功能采用MVC架構(gòu)，分別為數(shù)據(jù)持久層（Model）、視圖界面層（View）、控制邏輯層（Controller）。數(shù)據(jù)持久層運用JPA技術將物探文件數(shù)據(jù)或表數(shù)據(jù)生成持久化對象；視圖界面層采用D3.js技術實現(xiàn)物探數(shù)據(jù)的點、線、面的展示和放大、縮小、移動、顏色的交互操作；控制邏輯層實現(xiàn)數(shù)據(jù)的解析、轉(zhuǎn)換、查詢、排序，以JSON格式輸出到視圖界面層。功能架構(gòu)見圖1。

2.2 流程設計

物探數(shù)據(jù)格式以JSON輸出到View層后，如果數(shù)據(jù)不標準，則需要對數(shù)據(jù)先進行轉(zhuǎn)換處理，例如對數(shù)據(jù)進行線號排序、空值處理、格式轉(zhuǎn)換等。

數(shù)據(jù)處理后，利用D3.js技術，對這些數(shù)據(jù)進行綁定、坐標轉(zhuǎn)換，實現(xiàn)點、線、面的展示。

數(shù)據(jù)展示后，利用D3.js技術，實現(xiàn)數(shù)據(jù)與圖形的交互功能，即系統(tǒng)可根據(jù)用戶設置的圖形顏色、實時坐標、線號、關聯(lián)關系等數(shù)據(jù)進行圖形交互展示。

2.3 算法與技術應用研究

采用冒泡排序算法，按照線號對數(shù)據(jù)進行排序。

采用Transform算法，根據(jù)橫、縱坐標，實現(xiàn)點、線、面的位移、比例尺縮小、旋轉(zhuǎn)的圖形處理。

采用抽稀算法，對測點進行抽取，實現(xiàn)數(shù)據(jù)的最小化。

采用角度變換算法，根據(jù)線號，按測線角度進行平面旋轉(zhuǎn)。

3 圖形展示與交互界面

采用D3.js技術，實現(xiàn)了物探SPS（+）數(shù)據(jù)、導航數(shù)據(jù)、速度數(shù)據(jù)、解釋數(shù)據(jù)的二維圖像展示，以及圖形放大、縮小、移動、顏色設置、坐標實時展示的交互功能。

SPS（+）數(shù)據(jù)主要由炮點文件、接收點文件、關系文件三種數(shù)據(jù)組成，為了對數(shù)據(jù)進行質(zhì)量控制，用戶通常需要對其進行圖形展示，對炮點、接收點位置和它們之間的對應關系進行動態(tài)瀏覽和交互操作。使用D3.js技術實現(xiàn)的SPS數(shù)據(jù)展示功能界面如圖2所示。

PS數(shù)據(jù)展示中，采用了冒泡算法對炮點、接收點數(shù)據(jù)的線號進行了排序處理。算法如下：

炮點、接收點的橫縱坐標一般是十位和八位整數(shù)，需要對坐標進行轉(zhuǎn)換，以便將炮點、接收點圖形投影到網(wǎng)頁視窗范圍內(nèi)，同時，還需要設置可放大縮小的等級。

當鼠標移動到或點擊該炮點時，用戶可查看該炮點對應的所有接收點分布，即在圖中通過接收點的顏色變化展示其位置及分布。

導航數(shù)據(jù)主要由線號、點號、橫坐標、縱坐標、經(jīng)緯度、高程等數(shù)據(jù)組成。用戶需要通過與圖形交互對測線進行放大、縮小、移動、顏色、坐標設置等操作，對數(shù)據(jù)進行圖形分析和質(zhì)量檢查。使用D3.js技術實現(xiàn)的導航數(shù)據(jù)展示功能界面如圖3所示。

地震處理SEGY數(shù)據(jù)可基于D3.JS實現(xiàn)平面底圖的查看，從而控制Inline、Crossline、任意線的剖面繪制與顯示。通過關聯(lián)井位及劃線操作，可對地震SEGY數(shù)據(jù)進行剪裁操作。如圖4所示。

使用D3.js技術，還可實現(xiàn)速度數(shù)據(jù)的曲線展示以及解釋數(shù)據(jù)的面顯示。

4 結(jié)束語

基于D3.js技術的石油物探數(shù)據(jù)網(wǎng)頁圖形展示交互系統(tǒng)實現(xiàn)了物探SPS（+）數(shù)據(jù)、導航數(shù)據(jù)、速度數(shù)據(jù)、解釋數(shù)據(jù)的二維圖像展示和放大、縮小、移動、顏色設置、坐標實時展示的交互功能，基本滿足了用戶對物探數(shù)據(jù)網(wǎng)頁圖形展示與交互的需求。通過該系統(tǒng)，用戶能夠快速、高效地查看地震炮檢點的關系，檢查地震測線的數(shù)據(jù)質(zhì)量。

未來基于D3.js技術的網(wǎng)頁圖形展示技術還需要進一步的研究和應用，以便滿足更多物探數(shù)據(jù)的圖形展示和場景交互操作需求。

參考文獻：

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的網(wǎng)頁上可交互圖形的設計與實現(xiàn)北京：北京交通大學軟件學院，2005， 32（3）：1-3

3） 張運良.使用D3.js的知識組織系統(tǒng)Web動態(tài)交互可視化功能實現(xiàn).北京：中國科學技術信息研究所，2013，32（5）：132-136