用 Svelte 实现响应式、反应式的动画数据可视化

Tom Fevrier 和 Matthias Stahl 最近向 Svelte 社区介绍了使用 Svelte 实现响应性、交互式和动画数据可视化的技术。

在 Svelte Society 组织的一次演讲中( 基于数据的Svelte和D3可视化 )，Tom Fevrier，法国金融报纸《回声报》的图片记者，用 Svelte 从无开始实现了两个动画响应式图形。

他演示的响应式曲线可以在这里看到：

图形动画可以在这里看到：

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}

< circle

cx = {xScale(d.a)}

cy = {xScale(d.b)}

r = {radiusScale(d.c)}

fill = 'rebeccapurple'

{/each}

复制代码

虽然 D3 可以处理自己的动画和交互，并对可视化数据中的变化作出反应，但 Fevrier 表示，相应的 D3 API(例如 update )的复杂性比 Svelte 的更高。

Recommend