使用 Svelte 进行 D3 力模拟

问题描述

我正在构建一个在普通 d3 中运行良好的 d3 力模拟（我在 Observable here 中对其进行了测试），但我正在努力将其转换为苗条，我认为部分原因是我从 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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

force-layout javascript svelte