如何为Svelte中Layer Cake制作的柱状图添加Tooltip？

我正在尝试为使用Svelte图形框架Layer Cake制作的柱状图添加Tooltip。参考了Layer Cake官网带Tooltip的地图示例，但无法适配到柱状图中，连基础字符串都无法显示，更别说展示数据了。以下是包含模拟数据的最小示例代码：

App.svelte #

<script>
  import { LayerCake, Svg, Html } from "layercake";
  import Bar from "./Bar.svelte";
  import AxisX from "./AxisX.svelte";
  import AxisY from "./AxisY.svelte";
  import Tooltip from "./Tooltip.html.svelte";
  import { scaleBand } from "d3-scale";

  let data = [
      {
        fruit: "Apple",
        number: 364,
      },
      {
        fruit: "Banana",
        number: 263,
      },
      {
        fruit: "Mango",
        number: 872,
      },
      {
        fruit: "Pear",
        number: 156,
      },
    ]
  
  data.forEach((d) => {
    d[xKey] = +d[xKey];
  });

  const xKey = "number";
  const yKey = "fruit";

  let evt;
  let hideTooltip = false;
</script>

    <div class="chart-container">
      <LayerCake
        padding={{ top: 20, bottom: 80, left: 60, right:40 }}
        x={xKey}
        y={yKey}
        yScale={scaleBand().paddingInner([0.15])}
        xDomain={[0, null]}
        data={data}
      >
        <Svg>
          <AxisX gridlines={true} baseline={true} snapTicks={true} ticks="4" />
          <AxisY gridlines={false} />
          <Bar 
          />
        </Svg>
        <Html
      pointerEvents={false}
    >
      {#if hideTooltip !== true}
        <Tooltip
          {evt}
        >
          {@const tooltipData = {data}}
          {#each Object.entries(tooltipData) as [key, value]}
          {console.log('tooltipData',tooltipData)}
            <div class="row">hi is this showing up?</div>
          {/each}
        </Tooltip>
      {/if}
    </Html>
      </LayerCake>
    </div>
<style>
  .chart-container {
    width: 600px;
    height: 300px;
  }
</style>

其他组件均直接取自Layer Cake框架。

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