使用Svelte响应式语句实现D3力导向图的问题求助

尝试结合Svelte响应式语句构建D3力导向图，但二者无法正常协同，具体测试情况如下：

示例1：基础可运行版本 #

这是实现该图的最简方式：

<script>
    import * as d3 from 'd3'
    import { onMount } from 'svelte'
    import data from './data.json'

    let svg,
            width = 500,
            height = 400,
            links, nodes
    
    let simulation = d3.forceSimulation(data)

</script>

<svg 
         bind:this={svg}
         width={width}
         height={height}
         viewBox="{ -width/2 } { -height/2 } { width } { height }"
         >
    {#each data as node}
        <g class="g-nodes" >
            <circle bind:this={nodes}
                fill="cornflowerblue"
                r="5"
                cx={node.x}
                cy={node.y}
                ></circle>
        </g>
    {/each}
</svg>

示例2：添加forceX的响应式版本 #

尝试通过响应式语句添加forceX力，但未生效；仅当添加simulation.tick(100)（或任何大于0的数值）后才生效，但无法实现从初始位置的动画过渡：

<script>
    // 前序代码保持不变
    
    let simulation = d3.forceSimulation(data)

    $: simulation.force("x", d3.forceX(0)) // 未生效，圆形停留在初始位置
    $: simulation.tick(100) // 力生效，但无初始位置动画

</script>

<!-- 剩余SVG代码保持不变 -->

示例3：绑定tick事件的版本 #

尝试绑定.on("tick")事件，函数已触发（通过console.log验证），且data中的x、y值随tick更新，但{#each}块中的circle实际位置未同步更新：

<script>
    // 前序代码保持不变
    
    let simulation = d3.forceSimulation(data)

    function update() {
       console.log(data)
       return data // 不确定是否正确，仍未生效
    }

    $: simulation.force("x", d3.forceX(0))
    $: simulation.on("tick", update)

</script>

<!-- 剩余SVG代码保持不变 -->

data.json内容 #

[
    {"value": 10},
    {"value": 12},
    {"value": 15},
    {"value": 8},
    {"value": 7},
    {"value": 12},
    {"value": 25},
    {"value": 20},
    {"value": 16},
    {"value": 13},
    {"value": 5},
    {"value": 7},
    {"value": 8},
    {"value": 10},
    {"value": 12},
    {"value": 14},
    {"value": 24},
    {"value": 23},
    {"value": 22},
    {"value": 11}
]

现求助如何让Svelte响应式语句与D3力导向图正常协同，实现节点位置的动态更新与动画效果。

内容的提问来源于stack exchange，提问作者louislugas