Svelte / D3 函数获取路径上的点答案

【问题标题】：Svelte / D3 Function to get Point on a PathSvelte / D3 函数获取路径上的点
【发布时间】：2021-05-23 20:18:34
【问题描述】：

我想创建一个函数来获取沿 SVG 路径的第 n 个点的坐标，同时使用 Svelte 和 D3。

请注意，蓝点不是代码的一部分，仅用于说明。

我试过了……

    // the path generator
    const pathLine = line()
        .x(d => xScale(d.age))
        .y(d => yScale(d.temp))
        .curve(curveBasis);
    
    function pointFromPath(position){
        pos = pathLine(data).getPointAtLength(position);
        return pos
    }

    $: console.log(pointFromPath(2))

...

<svg viewBox="0 0 100 100">
    {#if (show)}
        <path transition:draw={{duration: 2000}}
                    d={pathLine(data)} />
    {/if}
</svg>

但它不起作用，我不确定接下来要尝试什么。我的 redproducable 代码在这里

https://svelte.dev/repl/189b1ff0485f4697b3061dd29daf1d3a?version=3.32.3

【问题讨论】：

标签： svg d3.js svelte

【解决方案1】：

问题是 pathLine(data) 返回一个代表“d”的字符串，而不是 DOM 元素本身。

在这里查看一个工作示例：

https://svelte.dev/repl/76d1d7d0a38b4f6c9f02f9ffb0200ea5?version=3.32.3

【讨论】：