Vue-interactive-graphics component allows to manipulate easily geometric objects by drag and two way data-binding. Under the hood, it uses d3.js.
- width, height: (numbers), dimentions in pixels of the component
- dataString: (string), JSON object as a string representing the data
- dataUpdate ( fun: string -> void ) update function called when vue-interactive-graphics modifies some values in the data (when the user drags some element)
data passed is a JSON object given to vue-interactive-graphics as a string and is
composed by the following elements:
- layers : vue-interactive-graphics is given a list of layers. Each layer can be interpreted as a group element (g) in SVG. Each layer contains geometric elements like lines, rectangles, circles, text etc.
- geometric element : Each geometric element is composed of display properties according to its type
- scaling factor : According to component size and drawing size, dimentions are scaled.