Javascript 使用Svelte和Flubber.js时显示GeoJSON形状时出错

UPDATE:我已经算上了REPL with the code and data here分.

我正试图使用Svelte和Flubber来重建demo example个显示变形Geojson形状的图形.我不喜欢使用D3，我找到了一个example，它向我展示了如何使用tweened进行插补.

我的topo.json，包含数据，被上传here.

这就是我到目前为止所拥有的:

<script>
   import { interpolate } from 'flubber';
  import { feature } from 'topojson';
  import { tweened } from 'svelte/motion';
  import * as eases from 'svelte/easing';
  import wards from '$lib/Wards/shapes/map.topo.json';

  const shape = tweened(undefined, {
    interpolate,
    easing: eases.cubicInOut,
    duration: 400,
  });

  let places = feature(wards, wards.objects.states).features.map(function (d) {
    return d.geometry.coordinates[0];
  });

  // Convert the polygon coordinates to a string format
  places = places.map(function (d) {
    return d.map(function (d) {
      return d.join(',');
    });
  });
  let selected = 0;
  $: $shape = places[selected];
</script>

{#each Object.keys(places) as key}
  <button
     class:selected="{selected === key}"
     on:click="{() => (selected = key)}"
   >
  {key}
  </button>
{/each}

<main>
   <svg viewBox="0 0 960 500">
      <path d="{$shape}"></path>
   </svg>
</main>

当我运行此命令时，我在控制台中收到以下错误:

Error: <path> attribute d: Expected moveto path command ('M' or 'm'), "77.4618079999067…".

Uncaught TypeError: All shapes must be supplied as arrays of [x, y] points or an SVG path string (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d).
Example valid ways of supplying a shape would be:
[[0, 0], [10, 0], [10, 10]]
"M0,0 L10,0 L10,10Z"

我做错了什么？我怀疑这与插补函数有关，但我不确定是什么.我是否需要将点数组转换为传统的SVG路径("M0,0 L10,0 L10,10Z" )？