node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »



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 structure

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 and coordinates.
  • scaling factor : According to component size and drawing size, dimentions are scaled.