Página principal: mudanças entre as edições
Sem resumo de edição |
Sem resumo de edição |
||
Linha 68: | Linha 68: | ||
<graph mode=interactive> | |||
{ | |||
// We want to use Vega 2, and specify image size | |||
"version": 2, "width": 300, "height": 80, | |||
// Set padding to the same value on all sides | |||
"padding": 12, | |||
// By default the background is transparent | |||
"background": "#edf1f7", | |||
"marks": [ | |||
{ | |||
// Draw a horizontal line | |||
"name": "scrollLine", | |||
"type": "rule", | |||
"properties": { | |||
"enter": { | |||
"x": {"value": 0}, | |||
"y": {"value": 40}, | |||
"x2": {"value": 300}, | |||
"stroke": {"value": "#000"}, | |||
"strokeWidth": {"value": 2} | |||
} | |||
} | |||
}, | |||
{ | |||
// Draw a triangle shape with a hover effect | |||
// naming objects allows us to reference them later | |||
"name": "handle", | |||
"type": "path", | |||
"properties": { | |||
"enter": { | |||
"x": {"value": 200}, | |||
"y": {"value": 40}, | |||
// path syntax is the same as SVG's path tag | |||
"path": {"value": "m-5.5,-10l0,20l11.5,-10l-11.5,-10z"}, | |||
"stroke": {"value": "#880"}, | |||
"strokeWidth": {"value": 2.5} | |||
}, | |||
"update": {"fill": {"value": "#fff"} }, | |||
// Change fill color of the object on mouse hover | |||
"hover": {"fill": {"value": "#f00"} } | |||
} | |||
} | |||
] | |||
} | |||
</graph> | |||