在 Svelte 中存储远程数据的位置，以便使用 Svelte 和 D3 进行响应式数据可视化（最佳实践）

Question

免责声明：我对 svelte、D3 和一般 JavaScript 模式都不是很熟悉。但是我真的很喜欢它，所以我很想学它并且已经投入了很多时间。不过，这感觉像是一个让我很恼火的超级基本问题。我希望它不会太混乱并且有人可能有想法。

它基本上是关于如何以高效、可重现和“最佳实践”的方式设置一个简单的图表（让它成为一个条形图）。我想我主要关心的是如何传递数据并将其用于不同的任务。例如。我认为在一个单独的组件中分离出尺度的构造（使用 d3）可能是个好主意。但是，此组件需要访问数据（并且可能还需要访问图表容器的最佳响应宽度）。

但是，另一个组件中的条形图也需要访问数据才能知道如何绘制矩形。

我对 JavaScript 的一个普遍误解（我想这是正确的词）是我不明白如何异步获取数据（使用例如浏览器 fetch 或 D3 的 csv方法）。我根本无法获取数据，然后将其作为 prop 传递给另一个组件。因为我要传递的是一个承诺...

所以我有这个非常基本的 REPL，它显示了我脑海中的一些信息：https://svelte.dev/repl/398f4c21b7a9409a9811fd8e38703a36?version=3.44.1

看起来像这样。在 App.html 中，我获取要用于多种用途的数据。但是我无法从该组件中“取出它”。

<script>
    import Chart from "./Chart.svelte"

    
    const url = "https://api.github.com/search/repositories?q=stars:>100000";
    
    async function getData(){
        let response = await fetch(url)
        let data = await response.json()
        console.log(data)
    }
    
    //async function getDataLocal(){
    //  let data = await d3.csv(<path_to_data>)
    //      return await data
    //  }
    
    
    let data = await getData()
    
</script>

<Chart {data}>Do Something with the data. Make the chart, build the scales, ....</Chart>

所以主要问题是：

是否有关于如何学习使用远程数据构建可持续图形的任何资源，svelte 和一些 D3。我已经看了很多 youtube 视频，我想我会再看一遍 Matthias Stahl 的视频；)
在这种情况下使用存储来存储数据是个好主意
更具体一点：由于数据（可能）是固定的，但维度不是：什么是让应用程序知道重新计算比例的好方法way/place等等

Answer 1

这里有 3 个不同的问题：

获取、存储和检索数据（又名数据源层）
manipulating/transforming 数据（又名业务逻辑层）
显示数据（又名表示层）

我将把最后一部分放在一边，因为它只涉及 D3（如果这是您选择的可视化库）并且网上有大量关于该主题的资源，我将转而关注似乎是您问题的核心，即如何在 Svelte 中获取数据、将数据存储在何处、如何将其传递给组件以及如何操作数据。

1。 Svelte 中的异步查询

您的第一个问题是关于如何处理异步请求。您不能在 Svelte 文件的 <script> 部分的根级别使用 await 语句，这意味着以下反应语句会产生错误：

// will fail
$: data = await getData(url)

但是，您可以调用将处理分配的异步函数。当 url 更改并检索到新数据时，反应性仍然有效，您的组件将重新呈现：

// will work
$: updateData(url)

async function updateData(url) {
  data = await getData(url)
}

Here is a working example based on the REPL in your question

2。使用商店

正如您从上面的示例中看到的那样，您必须将数据传递给 <Header> 和 <Chart> 组件，以便在以下任何一个中使用：

<Header {data}>GitHub Lookup</Header>
<Chart {data}/>

但是，如果您想在应用程序的其他地方使用图表怎么办？如果您有另一个组件想要使用相同的数据怎么办？

显然您不想一遍又一遍地获取相同的数据（除非请求本身发生了变化）。您还希望避免在应用程序的任何地方将数据作为 prop 传递。您将希望仅将数据提供给将使用它的这些组件。

这是商店派上用场的地方。任何组件都可以订阅商店。可写存储将允许更新其内容，而可读存储将是 - 顾名思义 - 只读。

商店不需要很复杂。以下是一个非常基本的可写存储：

import { writable } from 'svelte/store'

export const githubStore = writable(null) // initialized with a null value

然后您所要做的就是与您的商店互动。

正在更新应用程序组件中的商店：

import { githubStore as data } from './githubStore.js' // import the store we defined above under the name 'data'
.
.
.
async function updateData(url) {
  $data = await getData(url) // using the $ shorthand to access the store (assigning a new value will update the store content)
}

在您的组件中使用（即订阅）商店：

import { githubStore as data } from './githubStore.js' // import the store we defined above under the name 'data'
.
.
.
// using the $ shorthand to access the store
{#each $data.items as item (item.id)}
  <li><a href={item.html_url}>{item.full_name}</a> [{item.stargazers_count}⭐]</li>
{/each}

阅读 here 了解有关将 $ 反应式语法用于商店的详细信息

现在您的子组件正在订阅您存储数据的商店，您不再需要将该数据作为 prop 传递：

<Header>GitHub Lookup</Header>
<Chart />

Here is an updated version of the REPL above, using stores

3。进一步考虑

当您想开始操作或转换已放入存储中的数据时，derived 存储会派上用场。当您的原始商店中的数据更新时，派生商店将根据对原始商店的更改自动更新。

您还可以在提供的 readable/writable 商店的基础上添加您自己的功能和自定义方法。这些是稍微高级一些的主题，但在涉及数据操作时会派上用场。

最后，D3 将提供自己的数据操作方法，因此由您决定直接在 Svelte 中处理多少操作，以及将多少操作委托给 D3。我可能会将与可视化（缩放、缩放等）相关的所有内容都留在 D3 端，并在 Svelte 端（或者更好的是，直接在背面）对数据（即业务逻辑）进行实际的预可视化操作-如果您有权访问它，请结束！）。

在 Svelte 中存储远程数据的位置，以便使用 Svelte 和 D3 进行响应式数据可视化（最佳实践）

Where to store remote data in Svelte for responsive data vizualisations with Svelte and D3 (best practices)

javascript

data-visualization

d3.js

svelte

1。 Svelte 中的异步查询

2。使用商店

3。进一步考虑