Это файл index.html:
Код: Выделить всё
window.onload = () => {
console.log("Script start");
// =============================================
// 1. REGISTER CUSTOM TRANSFORM (GLOBAL SCOPE)
// =============================================
function DoubleValueTransform(params) {
vega.Transform.call(this, [], params); // Initialize superclass
console.log("DoubleValueTransform Constructor");
}
DoubleValueTransform.prototype = Object.create(vega.Transform.prototype);
DoubleValueTransform.prototype.constructor = DoubleValueTransform;
DoubleValueTransform.Definition = {
"type": "DoubleValueTransform",
"metadata": {"modifies": true},
"params": [
{ "name": "factor", "type": "number", "default": 2 }
]
};
// Implement transformation logic
DoubleValueTransform.prototype.transform = function (_, pulse) {
console.log("Inside the transform");
const factor = _.factor || 2;
pulse.visit(pulse.SOURCE, d => {
d.value = d.value * factor;
console.log("Value transformed:", d.value);
});
return pulse.reflow();
};
// Register the custom transform
vega.transforms["DoubleValueTransform"] = DoubleValueTransform;
if (!vega.schema) {
vega.schema = {};
}
if (!vega.schema.transforms) {
vega.schema.transforms = {};
}
vega.schema.transforms["DoubleValueTransform"] = DoubleValueTransform.Definition;
console.log("Custom transform registered:", vega.transforms["DoubleValueTransform"]);
// =============================================
// 2. SPECIFICATION
// =============================================
const spec = {
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 400,
"height": 200,
"padding": 5,
"signals": [
{
"name": "progress",
"value": 0,
"bind": {"input": "range", "min": 0, "max": 100},
"on": [{"events": {"signal": "timer"}, "update": "(progress + 1) % 100"}]
},
{
"name": "timer",
"value": 0,
"on": [{"events": {"type": "timer", "delay": 100}, "update": "timer + 1"}]
}
],
"data": [
{
"name": "table",
"values": [
{"category": "A", "value": 30},
{"category": "B", "value": 80},
{"category": "C", "value": 45}
],
"transform": [
{
"type": "DoubleValueTransform", // Custom transform
"factor": 2
},
{
"type": "filter",
"expr": "datum.value
Подробнее здесь: https://stackoverflow.com/questions/794 ... rm-in-vega
Мобильная версия