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

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Tom Fevrier和Matthias Stahl最近向Svelte社区介绍了使用Svelte实现响应性、交互式和动画数据可视化的技术。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在Svelte Society组织的一次演讲中("},{"type":"link","attrs":{"href":"https:\/\/www.youtube.com\/watch?v=gvvVzyDglzc&list=PL8bMgX1kyZTgFJrYW-_rJdL5v-LlCAQAr&index=2","title":"","type":null},"content":[{"type":"text","text":"基于数据的Svelte和D3可视化"}]},{"type":"text","text":")，Tom Fevrier，法国金融报纸《回声报》的图片记者，用Svelte从无开始实现了两个动画响应式图形。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"他演示的响应式曲线可以在这里看到："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/9d\/95\/9d5c6bdc041ca5746e87efaf849fd995.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"图形动画可以在这里看到："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/by\/f3\/byyabccc3408c32823ba045eb3fd93f3.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Fevrier解释说，背后的核心思想是利用了D3和Svelte。D3有一组用于图形可视化的函数，用来计算"},{"type":"link","attrs":{"href":"https:\/\/github.com\/d3\/d3\/blob\/master\/API.md#scales-d3-scale","title":"","type":null},"content":[{"type":"text","text":"尺度"}]},{"type":"text","text":"、"},{"type":"link","attrs":{"href":"https:\/\/github.com\/d3\/d3\/blob\/master\/API.md#interpolators-d3-interpolate","title":"","type":null},"content":[{"type":"text","text":"插值"}]},{"type":"text","text":"、"},{"type":"link","attrs":{"href":"https:\/\/github.com\/d3\/d3-shape\/tree\/v2.0.0","title":"","type":null},"content":[{"type":"text","text":"形状"}]},{"type":"text","text":"等。另一方面，Svelte负责处理图形可视化的模块化(通过组件)、交互性(事件处理)、反应性和响应性(通过数据绑定)。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Fevrier进一步解释说，开发人员可以借助Svelte将命令式D3代码转换成声明式Svelte代码。Fevrier通过以下的D3代码来说明他的想法："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"plain"},"content":[{"type":"text","text":"d3.selectAll('circle')\n .data(data).enter()\n .append('circle')\n .attr('cx', d => xScale(d.a))\n .attr('cy', d => xScale(d.b))\n .attr('r', d => radiusScale(d.c))\n .attr('fill', 'rebeccapurple')"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"转成Svelte代码："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"plain"},"content":[{"type":"text","text":"{#each data as d}\n \n{\/each}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"虽然D3可以处理自己的动画和交互，并对可视化数据中的变化作出反应，但Fevrier表示，相应的D3 API(例如"},{"type":"link","attrs":{"href":"https:\/\/observablehq.com\/@d3\/general-update-pattern","title":"","type":null},"content":[{"type":"text","text":"update"}]},{"type":"text","text":")的复杂性比Svelte的更高。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}