用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}}]}