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

Question

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

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

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

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

所以我有这个非常基本的 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 的视频；)

• 在这种情况下使用存储来存储数据是个好主意吗

• 更具体一点:由于数据(可能)是固定的，但维度不是:让应用知道重新计算比例等的好方法/位置是什么。

Answer 1

这里有 3 个不同的问题:

• 获取、存储和检索数据(也称为数据源层)
• 操作/转换数据(又名业务逻辑层)
• 显示数据(又名表示层)

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

1。 Svelte 中的异步查询

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

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

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

// 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

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

在您的 App 组件中更新商店:

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有关在商店中使用 $ 响应式(Reactive)语法的详细信息

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

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

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

3。进一步的考虑

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

您还可以通过添加自己的功能和自定义方法来构建提供的可读/可写存储。这些是稍微高级一些的主题，但在涉及数据操作时会派上用场。

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