马峰　刘景义　项建

【摘要】为了满足石油物探数据网页图形展示交互的需求，提出了基于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