Javascript 无法设置Vega Lite的宽度和高度

我正在通过鼠标拖动调整织女星可视化的大小

我的方法是通过包装Vega visualization，并将宽度和高度设置为

container

。该方法在以下章节中描述：

您可以将顶层宽度或高度属性设置为“容器”以 指示绘图的宽度或高度应与 它周围的容器

我已经尝试过了，但可视化无法根据其周围的容器调整自身大小。可视化非常小：

似乎我已成功地将div设置为

，但canvas未能将自身设置为周围的容器

代码：

从'react vega'导入{VegaLite}
从“React”导入React，{useState}；
var specDefault={
宽度：“容器”，
高度：“容器”，
马克：“酒吧”，
编码：{
x:{field'a'，type'ordinal'}，
y:{字段：'b'，类型：'quantitative'}，
},
数据：{name:'table'}，
}
常数barData={
表:[
{a:'a'，b:28}，
{a:'B'，B:55}，
{a:'C'，b:43}，
{a:'D'，b:91}，
{a:'E'，b:81}，
{a:'F'，b:53}，
{a:'G'，b:19}，
{a:'H'，b:87}，
{a:'我'，b:52}，
],
}
函数可视化（）{
返回(
{VegaOutput（）}
)
}
返回(
{SetMark（）}
{SetName（）}
)
}
函数VegaOutput（）{
返回(
)
}
函数App（）{
返回(
{visualization（）}
)
}
导出默认应用程序；

错误：

import { VegaLite } from 'react-vega'
import React, { useState } from "react";

var specDefault = {
  width: "container",
  height: "container",
  mark: 'bar',
  encoding: {
    x: { field: 'a', type: 'ordinal' },
    y: { field: 'b', type: 'quantitative' },
  },
  data: { name: 'table' },
}

const barData = {
  table: [
    { a: 'A', b: 28 },
    { a: 'B', b: 55 },
    { a: 'C', b: 43 },
    { a: 'D', b: 91 },
    { a: 'E', b: 81 },
    { a: 'F', b: 53 },
    { a: 'G', b: 19 },
    { a: 'H', b: 87 },
    { a: 'I', b: 52 },
  ],
}

function Visulization() {
  return (
    <>
      {VegaOutput()}
    </>
  )
}

  return (
    <>
      {SetMark()}
      {SetName()}
    </>
  )
}

function VegaOutput() {
  return (
    <div style={{ width: '800px', height: '800px' }}>
      <VegaLite spec={specDefault} data={barData} />
    </div>
  )
}

function App() {
  return (
    <>
      {Visulization()}
    </>
  )
}

export default App;