将 Plot 集成到 Svelte 中

Question

如何在 Svelte 中集成 @observablehq/plot？

下面是代码，目前正在为我工作，有没有更好的集成方式？

<script>
import * as Plot from "@observablehq/plot";

export function myplot(node) {
  node.appendChild(
    Plot.plot({x: {domain: [100, 0]}, grid: true})
  )
}
</script>


<div use:myplot></div>

Answer 1

对于外部组件和库，您必须执行类似的操作。这是一种合理的做法；您可以将集成封装在单独的组件中，以方便使用。

例如最基本的方法是将所有选项公开为一个组件属性:

<script>
    import * as Plot from "@observablehq/plot";
    
    export let options;

    function myplot(node) {
        node.appendChild(
            Plot.plot(options)
        )
    }
</script>


{#key options}
    <div use:myplot {...$$restProps}></div>
{/key}

当 options 变化时，{#key} 块使情节 re-render。

用法：

<script>
  import Plot from './Plot.svelte'
</script>

<Plot options={{ x: { domain: [100, 0] }, grid: true }} />

如果您需要可以根据需要公开的事件和其他交互性。

REPL example

将 Plot 集成到 Svelte 中

Integrating Plot into Svelte

plot

svelte

sveltekit

observablehq