vega-scenegraph

Creating and Managing Scene Graphs

This feature allows you to create and manage scene graphs. The code sample demonstrates how to create a new scene graph, add a rectangle mark to it, and append the rectangle to the scene.

const vega = require('vega-scenegraph');

// Create a new scenegraph
const scene = new vega.Scenegraph();

// Add a rectangle mark
const rect = scene.mark('rect').item({
  x: 10,
  y: 10,
  width: 100,
  height: 50,
  fill: 'blue'
});

// Add the rectangle to the scene
scene.root.append(rect);

Rendering Contexts

This feature provides tools for creating rendering contexts. The code sample shows how to create a new scene graph, initialize a canvas rendering context, and render the scene.

const vega = require('vega-scenegraph');

// Create a new scenegraph
const scene = new vega.Scenegraph();

// Create a rendering context
const renderer = new vega.CanvasRenderer().initialize(document.querySelector('canvas'), 500, 500);

// Render the scene
renderer.render(scene.root);

Hit Testing

This feature allows for hit testing, which is the process of determining whether a point or area intersects with graphical elements. The code sample demonstrates how to create a scene graph, add a rectangle, and perform a hit test to check if a point is within the rectangle.

const vega = require('vega-scenegraph');

// Create a new scenegraph
const scene = new vega.Scenegraph();

// Add a rectangle mark
const rect = scene.mark('rect').item({
  x: 10,
  y: 10,
  width: 100,
  height: 50,
  fill: 'blue'
});

// Add the rectangle to the scene
scene.root.append(rect);

// Create a hit test
const hitTest = new vega.HitTest(scene.root);

// Check if a point is within the rectangle
const hit = hitTest.test(20, 20);
console.log(hit); // true if the point (20, 20) is within the rectangle