在Svelte中使用Flubber.js显示GeoJSON形状时出错

6ju8rftf  于 2023-06-25  发布在  其他
关注(0)|答案(1)|浏览(88)

更新:我已经包含了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")的东西?

fhg3lkii

fhg3lkii1#

下面是一个带有固定代码的REPL:https://svelte.dev/repl/6f98e177b5bf416e8a9c269a37b08d7d?version=4.0.0
为了后代,这里是固定的内容:

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

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

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

  // for each place, // Convert the polygon coordinates to a string format
  places = places.map(function (d) {
    const points = d[0].map((p, i) => {
      const x = p[0].toFixed(4), y = p[1].toFixed(4)
      if (i == 0) return `M${x},${y}`
      return `L${x},${y}`
    });
    return points.join(" ") + "Z";
  });

  let selected = 0;
  $: $shape = s;
</script>

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

<main>
  <svg viewBox="77 12 2 2">
    <path d={$shape}></path>
  </svg>
</main>

<style>
  svg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  path {
    fill: #0074d9;
  }

  button {
    margin: 0 0.5em 0 0;
  }

  .selected {
    background-color: #333;
    color: white;
  }
</style>

相关问题