Javascript 基于svelte的D3力仿真

我正在构建一个d3力模拟，它在普通d3中运行良好（我在Observable中进行了测试），但我正在努力将其转换为svelte，我想部分原因是我从URL获取数据，而承诺让我大吃一惊

数据传输很好，svg中填充了圆圈，但圆圈只是在3组中相互堆叠。很明显，我并没有实际运行模拟，但我不知道我做错了什么。任何帮助都将不胜感激

这是我的密码：

<script>
    import * as d3 from 'd3';
    import rough from 'roughjs';
    import { onMount } from 'svelte';
    //import {forceSimulation} from 'd3Force';

    let width = 800;
    let height = 800;

    const m = 3;

    const colors = {
        words: '#fcd6d9',
        acts: '#fcb6be',
        gifts: '#f995a4',
        time: '#f3728d',
        touch: '#ec4977'
    }

    let points;
    let simulation;

    const rawData = d3.csv('https://raw.githubusercontent.com/sarachodosh/60days/main/60days_data.csv')
        .then(data => {
            
            points = data.map(d => {
                let i = Math.floor(Math.random() * m) //the cluster id
                let focusX = 110 * Math.cos(i / m * Math.PI * 2)
                let focusY = 110 * Math.sin(i / m * Math.PI * 2)

                let dataPoint = {
                    day: d.day,
                    cluster: +d.cluster,
                    person: d.person,
                    act_type: d.act_type,
                    r: d.person === 'both' ? 10 : 15,
                    x: focusX,
                    y: focusY,
                    focusX: focusX,
                    focusY: focusY
                } 
                return dataPoint

            })
        
            console.log(points)
            
            simulation = d3.forceSimulation()
                .force('center', d3.forceCenter(width/2, height/2))
                .nodes(points)
                .on("tick", () => {
                    points = points
                    
                })      
            
            simulation.tick()
            
        })

</script>

<main>

<svg viewBox='0 0 {width} {height}'>
    <g>
        {#if points}
        {#each points as d}
            <circle r='{d.r}' cx='{d.x}' cy='{d.y}' fill='{colors[d.act_type]}'></circle>
        {/each}
        {/if}
    </g>
</svg>

</main>

从“d3”导入*作为d3；
从“粗加工”导入粗加工；
从“svelte”导入{onMount}；
//从'd3Force'导入{forceSimulation}；
宽度=800；
设高度=800；
常数m=3；
常量颜色={
文字：“#fcd6d9”，
法案：“#fcb6be”，
礼品：“#f995a4”，
时间：“#f3728d”，
触摸：“#ec4977”
}
让点；
let仿真；
const rawData=d3.csv（'https://raw.githubusercontent.com/sarachodosh/60days/main/60days_data.csv')
。然后（数据=>{
点=数据.map（d=>{
设i=Math.floor（Math.random（）*m）//集群id
设focusX=110*Math.cos（i/m*Math.PI*2）
设focusY=110*Math.sin（i/m*Math.PI*2）
设数据点={
日期：d.day，
集群：+d.cluster，
人：d.person，
动作类型：d.动作类型，
r:d.person==‘两者’？10:15，
x:focusX，
y:聚焦，
focusX:focusX，
焦点：焦点
} 
返回数据点
})
console.log（点）
模拟=d3.forceSimulation（）
.力（'中心'，d3.力中心（宽度/2，高度/2））
.节点（点）
.on（“勾号”，（）=>{
点数=点数
})      
simulation.tick（）
})
{#如果点}
{#每个点作为d}
{/每个}
{/if}

只是回答我自己的问题，因为我自己的谷歌搜索结果显示我找到了解决办法！在其他地方运行模拟（我在Observable中运行，因为它已经在那里了），然后保存模拟创建的x，y坐标。然后像散点图一样画出你的点。