I'd like to create a function that gets the coordinates of the nth point along an SVG path, while using Svelte and D3.
Note, the blue dot is not part of the code and there just for illustration.
I've tried this...
// 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>
But it doesn't work and I'm not sure what to try next. My redproducable code is here
https://svelte.dev/repl/189b1ff0485f4697b3061dd29daf1d3a?version=3.32.3
