Light High Efficiency Graph Component

Qunee Developer Guide

Translation and Zooming

Graph component uses roaming translation interaction, supporting drag and drop and translation, rolling zooming. Touch translation and double finger zooming and the like functions are supported in mobile devices. Besides, inertial animation effect is also supported. Relevant port functions are showed hereinafter:


Translate the canvas center to (-100, -50)

var graph = new Q.Graph(canvas);
var hello = graph.createNode("Hello", -100, -50);
var qunee = graph.createNode("Qunee", 100, 50);
var edge = graph.createEdge("Hello\nQunee", hello, qunee);
graph.callLater(function(){graph.centerTo(-100, -50, 1.5);});

Operation effect

The canvas will move to the right bottom corner. The node ‘Hello’ moves to the center of component