Categories
程式開發

用Svelte實現響應式、反應式的動畫數據可視化


Tom Fevrier和Matthias Stahl最近向Svelte社區介紹了使用Svelte實現響應性、交互式和動畫數據可視化的技術。

在Svelte Society組織的一次演講中(基於數據的Svelte和D3可視化“),Tom Fevrier,法國金融報紙《迴聲報》的圖片記者,用Svelte從無開始實現了兩個動畫響應式圖形。

他演示的響應式曲線可以在這裡看到:

用Svelte實現響應式、反應式的動畫數據可視化 1

圖形動畫可以在這裡看到:

用Svelte實現響應式、反應式的動畫數據可視化 2

Fevrier解釋說,背後的核心思想是利用了D3和Svelte。 D3有一組用於圖形可視化的函數,用來計算尺度“,插值“,形狀“等。另一方面,Svelte負責處理圖形可視化的模塊化(通過組件)、交互性(事件處理)、反應性和響應性(通過數據綁定)。

Fevrier進一步解釋說,開發人員可以藉助Svelte將命令式D3代碼轉換成聲明式Svelte代碼。 Fevrier通過以下的D3代碼來說明他的想法:

d3.selectAll('circle')
.data(data).enter()
.append('circle')
.attr('cx', d => xScale(d.a))
.attr('cy', d => xScale(d.b))
.attr('r', d => radiusScale(d.c))
.attr('fill', 'rebeccapurple')

轉成Svelte代碼:

{#each data as d}

{/each}

雖然D3可以處理自己的動畫和交互,並對可視化數據中的變化作出反應,但Fevrier表示,相應的D3 API(例如更新“)的複雜性比Svelte的更高。