如何解决使用 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 举报,一经查实,本站将立刻删除。