簡(jiǎn)介這是一套面向地震數(shù)據(jù)處理與可視化開發(fā)者的 JavaScript 模塊資源適合具備前端基礎(chǔ)、希望在地震數(shù)據(jù)展示場(chǎng)景中復(fù)用現(xiàn)成模塊的中級(jí)學(xué)習(xí)者。壓縮包共184個(gè)文件、約1.02MB以83個(gè) JavaScript 源碼和60個(gè) HTML 示例頁(yè)為主輔以 CSS、SAC 數(shù)據(jù)樣例及少量 Python、JSON 與配置文件方便邊讀源碼邊運(yùn)行示例。內(nèi)容按功能拆分為 FDSN 臺(tái)站、事件與波形查詢DataLink WebSocket 協(xié)議日期時(shí)間選擇控件經(jīng)緯度距離計(jì)算OregonDSP 傅里葉變換和基于 d3 的頻譜繪圖等子模塊可幫助讀者理解地震數(shù)據(jù)從請(qǐng)求、解析、處理到展示的完整鏈路。已有320人學(xué)習(xí)適合用作小型地震數(shù)據(jù)可視化頁(yè)面搭建及模塊化源碼參考。1. 從一堆二進(jìn)制波形說起seisplotjs 到底解決什么問題前年幫某實(shí)驗(yàn)室的同事做一個(gè)臺(tái)網(wǎng)值班看板對(duì)方給了一塊移動(dòng)硬盤里面是幾個(gè)月的連續(xù)波形和一份臺(tái)站元數(shù)據(jù)要求是「打開網(wǎng)頁(yè)就能看別裝軟件」。桌面端工具能畫圖但嵌不進(jìn) Web 系統(tǒng)如果從零開始寫光是解析二進(jìn)制記錄頭就夠折騰很久。seisplotjs 正好處在這個(gè)位置——它是一組用 JavaScript 寫的地震數(shù)據(jù)處理模塊把解析、處理、繪制拆成可以單獨(dú)復(fù)用的幾層miniSEED 的二進(jìn)制記錄、StationXML 臺(tái)站元數(shù)據(jù)、QuakeML 事件目錄都能讀進(jìn)內(nèi)存整理成統(tǒng)一對(duì)象后再交給瀏覽器畫成 SVG。它適合做 Web 端波形展示、臺(tái)站狀態(tài)監(jiān)控、教學(xué)演示的前端開發(fā)如果你只想在命令行里批量做數(shù)值處理這套東西反而不順手。2. 骨架拆解模塊分層、依賴選型和一份能看懂的目錄樹拿到一個(gè)包我習(xí)慣先看package.json和src目錄不急著import。seisplotjs 并不是一個(gè)只提供單個(gè)工具函數(shù)的庫(kù)而是按「數(shù)據(jù)模型、格式解析、圖形渲染、數(shù)值計(jì)算」切開的四層結(jié)構(gòu)。這個(gè)邊界定得清不清楚直接決定你能不能在 Node 里跑批量預(yù)處理、在瀏覽器里只加載渲染那部分、在服務(wù)端只引解析器。分層不清的庫(kù)往往引入一個(gè)繪圖函數(shù)就順帶把整個(gè) DOM 相關(guān)代碼拖進(jìn) Node 環(huán)境進(jìn)程會(huì)直接報(bào)錯(cuò)。2.1 四層模塊與各自的調(diào)用邊界先把模塊清單擺出來后面所有代碼都落在這張表上模塊職責(zé)是否依賴 DOM典型入口core數(shù)據(jù)模型與格式解析否Seismogram、StationXML、QuakeML、時(shí)間工具plot波形圖、日震圖、粒子圖渲染是Seismograph、SeismographConfig、Helicorderd3ext補(bǔ) d3 缺的圖形能力是時(shí)間軸刻度、縮放行為封裝traveltime震相走時(shí)計(jì)算否走時(shí)曲線、理論到時(shí)表core 層是最值得先讀的它定義了一個(gè)叫 Seismogram 的對(duì)象把「一段波形」抽象成臺(tái)網(wǎng)、臺(tái)站、位置碼、通道碼、起始時(shí)間、采樣率、采樣點(diǎn)數(shù)組這幾樣?xùn)|西。所有格式解析器最終都產(chǎn)出這個(gè)對(duì)象所有繪圖模塊只消費(fèi)這個(gè)對(duì)象格式和渲染就此解耦。這個(gè)設(shè)計(jì)的好處很直接你從 miniSEED 讀、從自己的后端接口讀、從別人給的 JSON 讀只要最后拼成 Seismogram上面的圖就能畫。plot 層依賴 d3 做比例尺和路徑生成也依賴瀏覽器提供的 SVG 能力。我第一次在 Node 腳本里require了 plot 下的文件報(bào)的是document is not defined這個(gè)錯(cuò)很典型說明你越界了——預(yù)處理好數(shù)據(jù)之后應(yīng)該序列化出去不要試圖在服務(wù)端畫圖。2.2 依賴清單d3、時(shí)間庫(kù)、DOMParser 各自扛什么選型上它沒走 React 那條路而是直接用 d3 管圖形。理由不難理解波形是典型的數(shù)據(jù)驅(qū)動(dòng)圖形一條曲線對(duì)應(yīng)一個(gè)數(shù)組縮放平移改的是比例尺的定義域d3 的 scale 和 axis 天生就是干這個(gè)的換成虛擬 DOM 做 diff每幀都要重建幾萬個(gè)點(diǎn)的屬性反而更慢。d3 在這里主要用三樣?xùn)|西scaleLinear/scaleTime做數(shù)值到像素的映射axisBottom畫時(shí)間軸刻度zoom接管滾輪和拖拽手勢(shì)。時(shí)間處理單獨(dú)抽了一層。地震數(shù)據(jù)的時(shí)間全是 UTC而Date對(duì)象在展示時(shí)會(huì)按瀏覽器本地時(shí)區(qū)渲染這個(gè)錯(cuò)位是新手翻車重災(zāi)區(qū)后面避坑章節(jié)會(huì)細(xì)講。XML 解析靠瀏覽器原生的DOMParser不引第三方 XML 庫(kù)代價(jià)是命名空間處理要自己小心。打包產(chǎn)物一般給兩種ESM 給現(xiàn)代構(gòu)建工具UMD 給script直接引入。我在一個(gè)老項(xiàng)目里用過 UMD 版本頁(yè)面里掛一個(gè)全局變量就能調(diào)不用改整套構(gòu)建配置。提示只用解析功能的話優(yōu)先按模塊路徑單獨(dú)引入 core 下的文件別整包引入打包體積能小一大截。2.3 目錄結(jié)構(gòu)與構(gòu)建產(chǎn)物實(shí)際拆包時(shí)看到的目錄大致是這么組織的我按理解畫出來seisplotjs/ ├── src/ │ ├── core/ │ │ ├── seismogram.js # 波形對(duì)象與時(shí)間/索引換算 │ │ ├── stationxml.js # 臺(tái)站元數(shù)據(jù)解析與索引 │ │ ├── quakeml.js # 事件目錄解析 │ │ ├── miniseed.js # 二進(jìn)制記錄解析 │ │ ├── moment.js # UTC 時(shí)間工具 │ │ └── util.js # 通用小函數(shù) │ ├── plot/ │ │ ├── seismograph.js # 單臺(tái)/多臺(tái)波形圖 │ │ ├── seismographconfig.js # 繪圖參數(shù)對(duì)象 │ │ ├── helicorder.js # 24 小時(shí)日震圖 │ │ └── particles.js # 粒子運(yùn)動(dòng)圖 │ ├── d3ext/ │ └── traveltime/ ├── dist/ # 構(gòu)建產(chǎn)物ESM UMD └── package.json看這個(gè)結(jié)構(gòu)能得出兩個(gè)判斷。第一解析器和渲染器是平行的兩個(gè)目錄說明作者有意讓它們互不引用core 里不該出現(xiàn)任何document、window。第二seismographconfig.js單獨(dú)成文件說明繪圖參數(shù)被抽成了純數(shù)據(jù)對(duì)象而不是散落在繪圖類里的一堆字段——這一點(diǎn)對(duì)二次開發(fā)特別友好你可以在配置文件里存一套視圖模板換個(gè)頁(yè)面直接復(fù)用。2.4 最小引入一個(gè)頁(yè)面把一條波形畫出來想快速驗(yàn)證環(huán)境通不通先別碰真實(shí)數(shù)據(jù)手寫一條正弦波當(dāng)假數(shù)據(jù)跑通渲染鏈路再說// 引入整包生產(chǎn)環(huán)境建議按需引入 import * as sp from seisplotjs; // 構(gòu)造一條 60 秒、100Hz 的假波形避開真實(shí)數(shù)據(jù)的解析問題 const sampleRate 100; const y new Float32Array(60 * sampleRate); for (let i 0; i y.length; i) { y[i] Math.sin(2 * Math.PI * 1.5 * i / sampleRate); // 1.5Hz 正弦 } const seis new sp.core.Seismogram({ networkCode: XX, stationCode: AAA, locationCode: , channelCode: HHZ, startTime: new Date(Date.UTC(2024, 0, 1, 0, 0, 0)), sampleRate, y, }); const graph new sp.plot.Seismograph(document.getElementById(plot)); graph.seisData [seis]; graph.draw();這段代碼的意義在于把問題分兩段排查。如果假數(shù)據(jù)能畫出來說明引入方式、DOM 容器、d3 版本都沒問題后面波形是空的、歪的、平的時(shí)候就只需要懷疑解析環(huán)節(jié)。Seismogram的構(gòu)造參數(shù)里startTime必須是Date對(duì)象且語義上是 UTCsampleRate單位是 Hzy用Float32Array比普通數(shù)組省內(nèi)存長(zhǎng)波形差距很明顯。3. 解析鏈路miniSEED 記錄頭、StationXML 索引與 Seismogram 內(nèi)存模型這一章是整篇里最硬的部分。地震數(shù)據(jù)的麻煩不在于數(shù)值計(jì)算而在于元數(shù)據(jù)波形文件里只有采樣點(diǎn)通道的增益、方位角、采樣率、有效時(shí)間范圍全在另一份 XML 里兩邊要靠「臺(tái)網(wǎng).臺(tái)站.位置.通道」這個(gè)四元組對(duì)齊。對(duì)不齊畫出來的圖要么是直線要么時(shí)間軸整體偏移。3.1 miniSEED從 ArrayBuffer 里把記錄頭和采樣點(diǎn)拆開miniSEED 是定長(zhǎng)頭加數(shù)據(jù)區(qū)的結(jié)構(gòu)標(biāo)準(zhǔn)定長(zhǎng)頭 48 字節(jié)字段按大端序排列。用DataView逐字段讀比用字符串切片穩(wěn)/** * 解析一條 miniSEED 記錄的定長(zhǎng)頭 * param {DataView} dv 指向單條記錄的視圖 */ function parseMiniSeedHeader(dv) { // 站臺(tái)標(biāo)識(shí)定長(zhǎng) ASCII尾部可能帶空格 const readAscii (off, len) { let s ; for (let i 0; i len; i) s String.fromCharCode(dv.getUint8(off i)); return s.trim(); }; const net readAscii(18, 2); const sta readAscii(8, 5); const loc readAscii(13, 2); const cha readAscii(15, 3); // BTIME 結(jié)構(gòu)年(2) 年內(nèi)第幾天(2) 時(shí) 分 秒 未用(1) 萬分之一秒(2) const year dv.getUint16(20, false); const doy dv.getUint16(22, false); const hour dv.getUint8(24); const min dv.getUint8(25); const sec dv.getUint8(26); const frac dv.getUint16(28, false); // 單位 1/10000 秒 // 只有年積日沒有月份必須用 Date.UTC 反推 const startTime new Date( Date.UTC(year, 0, 1) (doy - 1) * 86400000 hour * 3600000 min * 60000 sec * 1000 Math.round(frac / 10) ); const numSamples dv.getUint16(30, false); // 采樣率 因子 × 乘子任一項(xiàng)為負(fù)時(shí)是除法關(guān)系 const factor dv.getInt16(32, false); const mult dv.getInt16(34, false); let sampleRate; if (factor 0 mult 0) sampleRate factor * mult; else if (factor 0 mult 0) sampleRate factor / -mult; else if (factor 0 mult 0) sampleRate mult / -factor; else sampleRate 1 / (factor * mult); return { net, sta, loc, cha, startTime, numSamples, sampleRate }; }邏輯上有三處容易寫錯(cuò)。第一處是Date.UTC(year, 0, 1)加年積日這里的 0 表示一月如果寫成getMonth那種從 1 開始的思路整條數(shù)據(jù)會(huì)偏一天。第二處是小數(shù)秒字段單位是萬分之一秒除以 10 換算毫秒要四舍五入不取整的話后續(xù)和時(shí)間軸刻度對(duì)齊時(shí)會(huì)出現(xiàn)半毫秒級(jí)的錯(cuò)位肉眼看不出但縮放后會(huì)暴露。第三處是采樣率因子和乘子都可能是負(fù)數(shù)表示的是除法我見過有人只寫了乘法分支結(jié)果 40Hz 的數(shù)據(jù)讀出來變成 -40圖直接倒過來。讀完頭再取采樣點(diǎn)// beginning of data 字段為 0 時(shí)數(shù)據(jù)區(qū)從 48 字節(jié)開始 const dataOffset dv.getUint16(44, false) || 48; const y new Float32Array(numSamples); for (let i 0; i numSamples; i) { // 每個(gè)采樣點(diǎn)是 4 字節(jié)有符號(hào)整數(shù)單位是 counts y[i] dv.getInt32(dataOffset i * 4, false); }采樣點(diǎn)是整數(shù)計(jì)數(shù)counts不是物理量。這一點(diǎn)決定了后面繪圖的振幅模式不同通道的 counts 量級(jí)能差好幾個(gè)數(shù)量級(jí)混在一張圖上必須做歸一化或者固定量程。3.2 StationXML一次遍歷建索引別在循環(huán)里查臺(tái)站元數(shù)據(jù)是一棵樹Network 下掛 StationStation 下掛 ChannelChannel 下是各種響應(yīng)參數(shù)。新手常犯的錯(cuò)是每處理一條波形就去 XML 里querySelector一遍幾百條數(shù)據(jù)下來頁(yè)面就卡住了。正確姿勢(shì)是一次遍歷建 Map鍵用四元組拼接/** * 把 StationXML 拍平成 Map鍵為 NET.STA.LOC.CHA * 注意不要用 querySelector帶默認(rèn)命名空間的 XML 匹配不到 */ function indexStationXML(xmlText) { const doc new DOMParser().parseFromString(xmlText, application/xml); const channels new Map(); const text (el, tag) { const n el.getElementsByTagName(tag)[0]; return n ? n.textContent.trim() : null; }; const nets doc.getElementsByTagName(Network); for (const net of nets) { const netCode net.getAttribute(code); for (const sta of net.getElementsByTagName(Station)) { const staCode sta.getAttribute(code); for (const chan of sta.getElementsByTagName(Channel)) { const loc chan.getAttribute(locationCode) || ; const cha chan.getAttribute(code); const key ${netCode}.${staCode}.${loc}.${cha}; channels.set(key, { net: netCode, sta: staCode, loc, cha, lat: parseFloat(text(chan, Latitude)), lon: parseFloat(text(chan, Longitude)), elev: parseFloat(text(chan, Elevation)), sampleRate: parseFloat(text(chan, SampleRate)), start: text(chan, StartDate), end: text(chan, EndDate), // 通道可能仍在用此處為 null }); } } } return channels; }參數(shù)說明幾個(gè)點(diǎn)。getElementsByTagName在 XML 文檔上不做 CSS 選擇器那套命名空間前綴解析而querySelector會(huì)所以這里用前者是刻意的。locationCode缺省時(shí)屬性值可能是空串也可能是--取值后要統(tǒng)一成空串不然后面拼 key 永遠(yuǎn)對(duì)不上。EndDate為空表示通道還在服役不要當(dāng)成解析失敗丟掉。3.3 Seismogram 內(nèi)存模型時(shí)間與索引的來回?fù)Q算波形對(duì)象的核心不是數(shù)組而是「起點(diǎn)時(shí)間 采樣率 數(shù)組」這個(gè)三元組能唯一確定任意采樣點(diǎn)的時(shí)刻。所有交互——框選、縮放、鼠標(biāo)懸停讀數(shù)——本質(zhì)都是在這兩種坐標(biāo)之間換算class Seismogram { constructor({networkCode, stationCode, locationCode, channelCode, startTime, sampleRate, y}) { this.networkCode networkCode; this.stationCode stationCode; this.locationCode locationCode; this.channelCode channelCode; this.startTime startTime; // Date語義為 UTC this.sampleRate sampleRate; // Hz this.y y; // Float32Array } get endTime() { // 注意是 length-1最后一幀的時(shí)刻不是 length/sr return new Date(this.startTime.getTime() (this.y.length - 1) / this.sampleRate * 1000); } timeToIndex(t) { return Math.round((t.getTime() - this.startTime.getTime()) / 1000 * this.sampleRate); } slice(t0, t1) { const i0 Math.max(0, this.timeToIndex(t0)); const i1 Math.min(this.y.length, this.timeToIndex(t1)); return new Seismogram({...this, startTime: this.timeAt(i0), y: this.y.slice(i0, i1)}); } timeAt(index) { return new Date(this.startTime.getTime() index / this.sampleRate * 1000); } }endTime用length - 1是個(gè)細(xì)節(jié)寫成length / sr會(huì)讓相鄰時(shí)段的數(shù)據(jù)在拼接時(shí)重疊一幀連續(xù)波形拼出來會(huì)有毛刺。timeToIndex用了Math.round框選取樣時(shí)結(jié)果穩(wěn)定如果換成Math.floor在窗口右邊界會(huì)少取一個(gè)點(diǎn)日震圖上表現(xiàn)為每行末尾缺一小段。3.4 處理鏈去均值、去趨勢(shì)、簡(jiǎn)單濾波繪圖之前通常要做幾步預(yù)處理常見做法是去均值、去線性趨勢(shì)需要看低頻的話再疊一級(jí)濾波// 去均值消除直流偏置否則曲線整體偏離基線 function demean(y) { let sum 0; for (let i 0; i y.length; i) sum y[i]; const mean sum / y.length; const out new Float32Array(y.length); for (let i 0; i y.length; i) out[i] y[i] - mean; return out; } // 去線性趨勢(shì)用首尾均值估斜率夠用且 O(n) function detrend(y) { const n Math.min(1000, Math.floor(y.length / 10)); let head 0, tail 0; for (let i 0; i n; i) head y[i]; for (let i y.length - n; i y.length; i) tail y[i]; const slope (tail / n - head / n) / (y.length - n); const out new Float32Array(y.length); for (let i 0; i y.length; i) out[i] y[i] - slope * i; return out; }去趨勢(shì)這里用首尾各取 1000 點(diǎn)估斜率是工程上的折中精度不如最小二乘但對(duì)可視化完全夠。真正需要嚴(yán)格處理時(shí)庫(kù)里的濾波實(shí)現(xiàn)更靠譜手寫 IIR 很容易把相位搞亂波形看著變漂亮了其實(shí)到時(shí)全偏了。4. 繪制鏈路從 SeismographConfig 參數(shù)到 SVG 路徑的完整過程數(shù)據(jù)進(jìn)了內(nèi)存接下來是把它變成像素。這一層的設(shè)計(jì)思路是「配置與渲染分離」SeismographConfig是個(gè)純數(shù)據(jù)對(duì)象負(fù)責(zé)描述「畫成什么樣」Seismograph負(fù)責(zé)把這份描述執(zhí)行到 DOM 上。分開的好處是視圖狀態(tài)可以序列化存起來做多視圖聯(lián)動(dòng)或者視圖模板時(shí)特別省事。4.1 SeismographConfig 的關(guān)鍵參數(shù)調(diào)圖九成時(shí)間花在改這幾個(gè)參數(shù)上先列清楚參數(shù)作用常見取值與說明amplitudeMode振幅量程策略fixed 固定量程便于橫向比較individual 每條自適應(yīng)timeScale時(shí)間窗偏移與縮放{offset, scale}聯(lián)動(dòng)多圖時(shí)共享同一個(gè)對(duì)象markerFlag是否顯示時(shí)間游標(biāo)交互讀數(shù)時(shí)打開每行高度單條波形占用的像素高度多臺(tái)堆疊時(shí)按容器高度均分是否顯示臺(tái)站標(biāo)簽左側(cè)標(biāo)簽欄臺(tái)站多時(shí)建議改成短碼amplitudeMode是最容易出問題的參數(shù)。默認(rèn)自適應(yīng)看著舒服但幾條波形放一起時(shí)一條安靜臺(tái)站的噪聲會(huì)被放大到和遠(yuǎn)處大震一樣的視覺幅度讀圖的人會(huì)誤判。做臺(tái)陣對(duì)比時(shí)我一般強(qiáng)制fixed量程取所有通道的最大絕對(duì)值寧可小信號(hào)看起來平一點(diǎn)。4.2 繪制流程比例尺、路徑、坐標(biāo)軸三段式不管上層封裝成什么樣落到 SVG 上永遠(yuǎn)是三步。下面這段是剝掉封裝后的核心邏輯理解了它調(diào)庫(kù)的時(shí)候就知道每個(gè)參數(shù)最終影響哪一步import * as d3 from d3; /** * 把一條波形畫到指定 SVG 分組里 * param {SVGElement} g 波形分組 * param {Seismogram} seis 波形對(duì)象 * param {number} width 繪圖區(qū)寬度 * param {number} height 單行高度 */ function renderTrace(g, seis, width, height) { // 1. 比例尺時(shí)間 - x振幅 - yy 軸翻轉(zhuǎn)SVG 原點(diǎn)在左上 const x d3.scaleTime() .domain([seis.startTime, seis.endTime]) .range([0, width]); const extent d3.extent(seis.y); const y d3.scaleLinear() .domain([extent[0], extent[1]]) .range([height, 0]) .nice(); // 2. 路徑逐點(diǎn)映射點(diǎn)數(shù)多時(shí)按像素寬度抽稀 const step Math.max(1, Math.floor(seis.y.length / width)); const line d3.line() .x((d, i) x(seis.timeAt(i * step))) .y(d y(d)); const sampled Array.from(seis.y.filter((_, i) i % step 0)); d3.select(g).selectAll(path.trace) .data([sampled]) .join(path) .attr(class, trace) .attr(fill, none) .attr(stroke, #2b6cb0) .attr(stroke-width, 1) .attr(d, line); // 3. 坐標(biāo)軸只在最底下一行畫時(shí)間軸其余行共享 d3.select(g).selectAll(g.axis) .data([null]) .join(g) .attr(class, axis) .attr(transform, translate(0,${height})) .call(d3.axisBottom(x).ticks(6).tickFormat(d3.utcFormat(%H:%M:%S))); }三段各有講究。比例尺這里y的 range 寫成[height, 0]是反的因?yàn)?SVG 坐標(biāo)系 y 向下增長(zhǎng)寫反了波形會(huì)上下顛倒我第一次畫出來以為數(shù)據(jù)壞了查了半天。路徑這一步做了抽稀step保證每個(gè)像素列最多取一個(gè)點(diǎn)一萬個(gè)點(diǎn)以上的波形不抽稀瀏覽器渲染會(huì)明顯掉幀。坐標(biāo)軸用d3.utcFormat而不是d3.timeFormat這一條是血淚經(jīng)驗(yàn)后面避坑章節(jié)展開。4.3 多臺(tái)堆疊與日震圖把 24 小時(shí)切成行單條波形好辦真正的顯示壓力來自兩種圖。一種是多臺(tái)堆疊十幾個(gè)臺(tái)站縱向排列共享同一時(shí)間軸做法是給每個(gè)臺(tái)站分配一個(gè)g并平移translate(0, i * rowHeight)時(shí)間比例尺對(duì)象共用一份。另一種是日震圖把一天的數(shù)據(jù)按 30 分鐘切成 48 行每行畫一段行內(nèi)時(shí)間軸隱藏只在左側(cè)標(biāo)小時(shí)刻度。日震圖的分行邏輯不難麻煩在跨天邊界。一小時(shí)的記錄可能跨兩條記錄文件甚至跨年積日拼接時(shí)要用endTime和下一段的startTime做空隙檢測(cè)中間有斷記就留空白不要硬接——硬接會(huì)把停擺期間的噪聲拉成一條虛假的斜線值班的人很容易誤判成事件。注意日震圖每行點(diǎn)數(shù)建議壓到 1000 以內(nèi)48 行乘上去就是幾萬個(gè)路徑節(jié)點(diǎn)超過這個(gè)量瀏覽器滾動(dòng)會(huì)明顯發(fā)澀。4.4 交互縮放與多圖聯(lián)動(dòng)縮放靠 d3 的 zoom 行為接管滾輪和拖拽核心是把事件里的transform換算成時(shí)間比例尺的新定義域然后重算路徑的d屬性。多圖聯(lián)動(dòng)的關(guān)鍵不是同時(shí)改所有圖而是讓所有圖共享同一個(gè)timeScale對(duì)象改一處其余圖在下一次重繪時(shí)自然跟上。實(shí)際做的時(shí)候有個(gè)坑如果在 zoom 回調(diào)里對(duì)每張圖都做一次完整重繪十幾個(gè)臺(tái)站滾一下要幾百毫秒。常見的優(yōu)化是拖動(dòng)過程中只改g的transform做位移zoomend事件觸發(fā)后再做一次真正的數(shù)據(jù)抽稀重繪視覺上就順了。5. 避坑清單跨域、時(shí)區(qū)、命名空間與性能的 5 個(gè)排查記錄這一章按「現(xiàn)象、原因、解決」來寫全是我自己踩過的。5.1 波形畫出來是一條直線現(xiàn)象數(shù)據(jù)加載成功控制臺(tái)沒報(bào)錯(cuò)圖上只有一條水平的細(xì)線。原因采樣點(diǎn)單位是 counts不同通道量級(jí)從幾十到幾百萬不等。如果amplitudeMode設(shè)成fixed且量程沿用了另一條大振幅通道的值小信號(hào)就會(huì)被壓成一條線另一種情況是數(shù)據(jù)本身帶很大的直流偏置去均值沒做。解決先打印d3.extent(seis.y)看數(shù)值范圍量級(jí)差超過三個(gè)數(shù)量級(jí)就說明需要按通道歸一化。把a(bǔ)mplitudeMode臨時(shí)改成individual驗(yàn)證一下如果立刻正常就確認(rèn)是量程問題。5.2 時(shí)間軸整體差 8 小時(shí)現(xiàn)象圖上顯示 08:00 有事件實(shí)際記錄是 00:00。原因miniSEED 里的時(shí)間是 UTC而d3.timeFormat和Date的字符串方法默認(rèn)按瀏覽器本地時(shí)區(qū)渲染一加一減正好差一個(gè)時(shí)區(qū)偏移。解決所有格式化和坐標(biāo)軸刻度統(tǒng)一換成 UTC 版本d3.utcFormat、d3.utcScale。另外存startTime時(shí)別用new Date(2024-01-01 00:00:00)這種不帶時(shí)區(qū)的字符串它會(huì)被當(dāng)成本地時(shí)間用Date.UTC(...)顯式構(gòu)造。5.3 StationXML 解析出來是空的現(xiàn)象getElementsByTagName(Network)返回長(zhǎng)度為 0但文件明明有內(nèi)容。原因StationXML 根節(jié)點(diǎn)帶默認(rèn)命名空間部分解析路徑下按標(biāo)簽名直查會(huì)失配另一個(gè)可能是文件開頭有 BOMDOMParser報(bào)解析錯(cuò)誤但被忽略了。解決先檢查doc.querySelector(parsererror)是否非空。命名空間問題改用getElementsByTagName或getElementsByTagNameNS別用querySelector(Network)。BOM 的話用text.replace(/^\uFEFF/, )先洗一遍。5.4 請(qǐng)求波形時(shí)報(bào)跨域現(xiàn)象本地頁(yè)面調(diào)數(shù)據(jù)接口控制臺(tái)報(bào) CORS 相關(guān)錯(cuò)誤Network 面板里請(qǐng)求是紅的。原因數(shù)據(jù)服務(wù)沒開Access-Control-Allow-Origin瀏覽器直接攔掉。這個(gè)錯(cuò)在fetch里表現(xiàn)為一個(gè)籠統(tǒng)的網(wǎng)絡(luò)錯(cuò)誤不點(diǎn)開 Network 面板很難定位。解決確認(rèn)服務(wù)端響應(yīng)頭本地開發(fā)可以起一個(gè)代理把請(qǐng)求轉(zhuǎn)發(fā)出去如果對(duì)方只支持 JSONP 那就沒轍得走服務(wù)端中轉(zhuǎn)。5.5 臺(tái)站一多頁(yè)面就卡死現(xiàn)象5 個(gè)臺(tái)站流暢20 個(gè)臺(tái)站拖動(dòng)時(shí)間軸時(shí)掉到個(gè)位數(shù)幀率。原因每條波形幾萬個(gè)點(diǎn)全部生成路徑節(jié)點(diǎn)SVG 節(jié)點(diǎn)數(shù)上去了瀏覽器布局和重繪都吃不消。解決按像素抽稀保證每個(gè)像素列最多一個(gè)點(diǎn)拖動(dòng)時(shí)只改 transform松手后再重繪臺(tái)站超過 30 個(gè)改用分頁(yè)或者按需加載時(shí)間窗。6. 二次開發(fā)給自有后端寫一個(gè)數(shù)據(jù)源適配器真實(shí)的改造需求通常不是改繪圖而是接數(shù)據(jù)。單位內(nèi)部的數(shù)據(jù)服務(wù)往往有自己的接口約定返回的既不是 miniSEED 也不是標(biāo)準(zhǔn) XML而是一坨自定義 JSON。這時(shí)候不要去改解析器正確做法是在「數(shù)據(jù)源」和「Seismogram」之間加一層適配器把外部格式翻譯成 core 層的對(duì)象上面的渲染代碼一行不用動(dòng)。6.1 適配器的寫法與邊界/** * 把內(nèi)部接口返回的 JSON 轉(zhuǎn)成 Seismogram 數(shù)組 * 約定resp.data 為 counts 數(shù)組resp.meta 含臺(tái)站與時(shí)間信息 */ async function fetchFromInternalApi({net, sta, cha, start, end}) { const url /api/waveform?net${net}sta${sta}cha${cha} start${start.toISOString()}end${end.toISOString()}; const resp await fetch(url).then(r r.json()); return resp.data.map(seg new Seismogram({ networkCode: seg.meta.net, stationCode: seg.meta.sta, locationCode: seg.meta.loc || , channelCode: seg.meta.cha, // 后端給的是毫秒時(shí)間戳必須顯式轉(zhuǎn) Date startTime: new Date(seg.meta.startMs), sampleRate: seg.meta.sr, y: Float32Array.from(seg.samples, v v - seg.meta.bias), // 順手扣掉偏置 })); }邊界要守住兩條適配器只做格式翻譯不做濾波、不做重采樣那些屬于處理鏈混在一起以后復(fù)用不了返回的必須是 core 層的標(biāo)準(zhǔn)對(duì)象不能讓繪圖模塊感知到內(nèi)部接口的存在。6.2 驗(yàn)證順序先斷言字段再看圖改造完別急著畫圖。先寫一段斷言把頭字段和已知值對(duì)一遍const list await fetchFromInternalApi({net: XX, sta: AAA, cha: HHZ, start, end}); const s list[0]; console.assert(s.sampleRate 0, 采樣率異常); console.assert(Math.abs(s.endTime - s.startTime) 0, 時(shí)長(zhǎng)異常); console.assert(s.y.length Math.round( (s.endTime - s.startTime) / 1000 * s.sampleRate) 1, 點(diǎn)數(shù)與采樣率不自洽);第三條斷言最關(guān)鍵它能一次性抓出時(shí)間單位錯(cuò)、采樣率錯(cuò)、丟幀這三類問題。我以前圖省事跳過這步直接畫圖結(jié)果圖上看著正常一放大就發(fā)現(xiàn)每段拼接處有 0.1 秒的縫隙回頭查了兩天才發(fā)現(xiàn)是后端把秒當(dāng)毫秒傳了。6.3 一點(diǎn)經(jīng)驗(yàn)改造這類庫(kù)最省時(shí)間的做法是先把「假數(shù)據(jù)」的完整鏈路跑通再逐步換成真實(shí)數(shù)據(jù)源每換一步跑一次斷言。從那以后我每次接新數(shù)據(jù)源都先寫一個(gè)只打印頭字段的小腳本跑通再動(dòng)手寫渲染代碼前面多花的二十分鐘往往能省下后面半天的排查。希望幫到你。本文還有配套的精品資源點(diǎn)擊獲取