将 Plot 集成到 Svelte答案

【问题标题】：Integrating Plot into Svelte将 Plot 集成到 Svelte
【发布时间】：2022-04-09 06:46:07
【问题描述】：

如何在 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>

标签： plot svelte sveltekit observablehq

【解决方案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}

{#key} 块使绘图在 options 更改时重新渲染。

用法：

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

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

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

REPL example

【讨论】：

谢谢你。我尝试将domain 中的数字移动到变量中，并引入了一个按钮来更改值。单击时值会发生变化，但 <Plot /> 没有收到它。