基于Svelte与D3的响应式可视化远程数据存储最佳实践

问题1 学习资源推荐 #

你可以先把Svelte官方的响应式语法、组件props、插槽相关核心语法吃透，D3侧重点掌握比例尺、数据转换、坐标轴这几个核心模块的API，不用上来就把D3全量API都学完。你提到的Matthias Stahl的相关教程已经覆盖了大部分Svelte+D3的最佳实践，足够支撑常规可视化项目的开发。如果需要学习可复用组件的设计逻辑，可以重点关注「状态分层」「组件职责拆分」相关的通用前端组件设计思路。

问题2 Svelte stores的适用性 #

这个场景用stores是非常合理的方案。如果你的数据源需要同时供给比例尺组件、柱状图渲染组件、甚至其他页内的统计卡片组件使用，stores可以跨组件层级共享响应式数据，不需要逐层透传props，维护成本更低。如果你的应用结构很简单，只有父组件和两三个直接子组件需要用到数据，直接通过props传递也完全可行，两种方案可以根据项目复杂度灵活选择。

问题3 响应式尺寸触发比例尺更新的实现 #

不需要手动做通知逻辑，直接用Svelte原生的响应式声明就能实现：

1. 首先在图表容器组件上用bind:clientWidth bind:clientHeight绑定容器的实时宽高，拿到响应式的尺寸变量
2. 把数据源、容器宽高都作为props传给比例尺组件
3. 在比例尺组件内用响应式块编写比例尺计算逻辑：

$: if (data && width && height) {
  // 只要data、width、height任意一个变量变化，这段代码自动执行
  xScale = d3.scaleBand()
    .domain(data.map(d => d.name))
    .range([0, width])
    .padding(0.1)
  yScale = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)])
    .range([height, 0])
}

计算好的比例尺再传给柱状图渲染组件，就可以实现容器尺寸变化时自动更新比例尺、重绘图表的效果。

另外你示例代码里的异步问题是getData函数没有返回获取到的data，所以拿到的变量是undefined，另外如果需要在模板里处理异步状态，可以用Svelte的{#await}块包裹子组件，避免把Promise对象直接传给子组件。

内容的提问来源于stack exchange，提问作者Robin Kohrs