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