Giters

vega / vega

A visualization grammar.

Home Page:https://vega.github.io/vega

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

TypeError when rendering a vega scene using SVGRenderer

AlexisPister opened this issue · comments

commented

Hi,

I am trying to use vega-scenegraph on a simple example to understand how it works. I am trying to render the example given in the github repo here https://github.com/vega/vega/tree/main/packages/vega-scenegraph

My code is the following

import {
    CanvasRenderer,
    SVGRenderer,
} from "vega-scenegraph";

const width = 800;
const height = 800;

const el = document.querySelector("#vis1");

let scene = {
  "marktype": "rect",
  "items": [
    {"x": 0, "y": 0, "width": 50, "height": 50, "fill": "steelblue"},
    {"x": 100, "y": 50, "width": 50, "height": 50, "fill": "firebrick"},
    {"x": 50, "y": 100, "width": 50, "height": 50, "fill": "forestgreen"}
  ]
}

const r = new SVGRenderer()
    .initialize(el, width, height, [0, 0], 1)
    .render(scene);

The html is

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + TS</title>
  </head>
  <body>
    <div id="vis1"></div>
    <script type="module" src="/src/vegaSceneTest.ts"></script>
  </body>
</html>

But I get the following error:

vega-scenegraph.module.js:4288 Uncaught TypeError: Cannot read properties of undefined (reading 'aria-hidden')
    at emit (vega-scenegraph.module.js:4288:17)
    at ariaItemAttributes (vega-scenegraph.module.js:3546:3)
    at SVGRenderer._update (vega-scenegraph.module.js:3978:5)
    at process (vega-scenegraph.module.js:3951:14)
    at visit (vega-scenegraph.module.js:1599:5)
    at SVGRenderer.mark (vega-scenegraph.module.js:3960:7)
    at SVGRenderer._render (vega-scenegraph.module.js:3829:12)
    at r._call (vega-scenegraph.module.js:3023:9)
    at SVGRenderer.render (vega-scenegraph.module.js:3027:7)
    at vegaSceneTest.ts:95:6

If I try the CanvasRenderer instead, I don't have any error, but the output canvas is blank.
I use vite 5.0.11 and vega-scenegraph 4.11.2 (latest version).

Am I doing something wrong?

commented

I fixed my issue, it seems to correct way to render the scene is to use

r.render(vega.sceneFromJSON(scene))

instead of

r.render(scene)