Notebooks 2.0 is here.

Published
Edited
Mar 24, 2020
Insert cell
md`# G event`
Insert cell
G = require("@antv/g@3")
Insert cell
{
const container = html`<div></div>`;

const canvas = new G.Canvas({
containerDOM: container,
width: 400,
height: 300,
pixelRatio: 1
});
canvas.addShape('rect', {
attrs: {
x: 0,
y: 0,
width: 400,
height: 300,
stroke: 'black'
}
})

const shape = canvas.addShape('circle', {
attrs: {
x: 10,
y: 10,
r: 5,
fill: 'red'
}
});

canvas.draw();
canvas.on('mousemove', function(ev) {
shape.attr({
x: ev.x,
y: ev.y
})
canvas.draw();
})
return container;
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more