在Svelte中的何處存盤遠程資料，以便使用Svelte和D3進行回應式資料可視化（最佳實踐）-有解無憂

免責宣告：我對 svelte、D3 和一般 JavaScript 模式都沒有很好的經驗。但是我真的很喜歡它，所以我真的很想學習它并且已經投入了相當多的時間。盡管如此，這仍然是一個讓我很惱火的超級基本問題。我希望它不會太混亂，有人可能有想法。

它基本上是關于如何以有效、可重復和“最佳實踐”的方式設定一個簡單的圖形（讓它成為條形圖）。我想我主要關心的是如何傳遞資料并將其用于不同的任務。例如，我認為在一個單獨的組件中分離尺度的構造（使用 d3）可能是一個好主意。但是，該組件需要訪問資料（并且可能還需要訪問圖表容器的回應寬度，在最好的情況下）。

但是，位于另一個組件中的條形也需要訪問資料才能知道如何繪制矩形。

我對 JavaScript 的一個普遍誤解（我想這是正確的詞）是我不明白如何異步獲取資料（例如使用瀏覽器fetch或 D3 的 csv方法）。我根本無法獲取資料，然后將其作為道具傳遞給另一個組件。因為我要傳遞的是一個承諾......

所以我有這個非常基本的 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 的視頻；）
在這種情況下使用商店來存盤資料是個好主意嗎
更具體一點：由于資料（可能）是固定的，但維度不是：讓應用程式知道重新計算比例等的好方法/地方是什么？

uj5u.com熱心網友回復：

這里有 3 個不同的問題：

獲取、存盤和檢索資料（又名資料源層）
操作/轉換資料（又名業務邏輯層）
顯示資料（又名表示層）

我將把最后一部分放在一邊，因為它只涉及 D3（如果這是您選擇的可視化庫），并且有大量關于此主題的在線可用資源，而我將專注于似乎是您問題的核心，即如何在 Svelte 中獲取資料、將資料存盤在何處、如何將其傳遞給組件以及如何操作資料。

1. Svelte 中的異步查詢

您的第一個查詢是關于如何處理異步請求。您不能await在<script>Svelte 檔案部分的根級別使用陳述句，這意味著以下反應性陳述句會產生錯誤：

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

但是，您可以呼叫將處理分配的異步函式。當 url 更改并檢索到新資料時，反應性仍然有效，并且您的組件將重新呈現：

// will work
$: updateData(url)

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

這是一個基于您問題中的 REPL 的作業示例

2. 使用商店

正如您從上面的示例中看到的，您必須將資料傳遞給您的<Header>和<Chart>組件才能在以下任一情況下使用它：

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

但是如果你想在你的應用程式的其他地方使用你的圖表怎么辦？如果您有另一個組件想要使用相同的資料怎么辦？

顯然，您不想一遍又一遍地獲取相同的資料（除非請求本身已更改）。您還希望避免將資料作為道具在您的應用程式中的任何地方傳遞。您將希望僅將資料提供給將使用它的這些組件。

這就是商店派上用場的地方。Stores 可以被任何組件訂閱。可寫存盤將允許更新其內容，而可讀存盤將 - 顧名思義 - 只讀。

商店不需要很復雜。下面是一個非常基本的可寫存盤：

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}

閱讀此處了解有關在商店中使用 $ 反應式語法的詳細資訊

Now that your child components are subscribing to the store where you stored your data, you do not need to pass that data as a prop any more:

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

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

3. Further considerations

When you want to start manipulating or transforming data that has been put into a store, derived stores come in handy. When the data in your original store is updated, the derived store will automatically update itself based on the changes to the original.

You can also build on the provided readable/writable stores by adding your own functionality and custom methods. These are slightly more advanced topics but would come in handy where data manipulation is concerned.

Finally, D3 will provide its own data manipulation methods, so it will be up to you to decide how much manipulation you handle directly in Svelte, and how much you delegate to D3. I would probably leave everything connected to visualization (scaling, zooming, etc.) on the D3 side, and have the actual pre-visualization manipulation of data (i.e. the business logic) on the Svelte side (or better yet, directly on the back-end if you have access to that!).

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/359436.html

標籤：javascript d3.js 数据可视化苗条的

上一篇：使用zoomIdentity后，D3縮放會破壞滑鼠滾輪縮放

下一篇：d3JS云圖：避免單詞重疊