馬峰　劉景義　項(xiàng)建

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

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

1 引言

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

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

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

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

2 系統(tǒng)設(shè)計(jì)

2.1 功能架構(gòu)

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

2.2 流程設(shè)計(jì)

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

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

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

2.3 算法與技術(shù)應(yīng)用研究

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

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

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

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

3 圖形展示與交互界面

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

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

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

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

當(dāng)鼠標(biāo)移動(dòng)到或點(diǎn)擊該炮點(diǎn)時(shí)，用戶可查看該炮點(diǎn)對(duì)應(yīng)的所有接收點(diǎn)分布，即在圖中通過接收點(diǎn)的顏色變化展示其位置及分布。

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

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

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

4 結(jié)束語(yǔ)

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

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

參考文獻(xiàn)：

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） 胡光強(qiáng) 王洪.基于J2EE的網(wǎng)頁(yè)上可交互圖形的設(shè)計(jì)與實(shí)現(xiàn)北京：北京交通大學(xué)軟件學(xué)院，2005， 32（3）：1-3

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