1

I building an application to display a connected graph, I found useful to make use of Vue.js for developing some functionalities.

For testing purpose, I tried to wrap up a simplest graph in a vue component, force directed layout, but the frame rate drops significantly (600 nodes in SVG, randomly connected each with 3 links => min FPS 2.4 max FPS ~9).

That is not acceptable for my scope.

My goal is to signal when user add/remove nodes to a vue component and backward, and in general signal an event on the graph to a vue component and backward.

Basically I want to keep the rendering of the graph in native code, for simplicity it would be ok to make use of the data structure and methods in a vue component. But I think I cannot do that, because vue would not find the corresponding UI.

Which approach should I use to communicate between the native coded graph and Vue components?

May I call directly internally the component, with smtg like vue.$data to make my graph react ?

Could you show a simple example to show how to access methods, props, events used internally in a vue component?

Below a little test (made use of Vivagraph library):

<template>
  <div>
    <div  id='graphContainer' ref="graphContainer"></div>
  </div>
</template>
<script>



    export default {
        data() {
            return {
              graph : Viva.Graph.graph(),
              graphics : Viva.Graph.View.svgGraphics()
            }
        },
        mounted() {

            // create an array, will make use of it later
            function range(start, stop, step) {
                if (typeof stop == 'undefined') {
                    // one param defined
                    stop = start;
                    start = 0;
                }

                if (typeof step == 'undefined') {
                    step = 1;
                }

                if ((step > 0 && start >= stop) || (step < 0 && start <= stop)) {
                    return [];
                }

                var result = [];
                for (var i = start; step > 0 ? i < stop : i > stop; i += step) {
                    result.push(i);
                }

                return result;
            };

            var randomNodes  = range(600);

            let v, u;
            for (var i = randomNodes.length - 1; i >= 0; i--) {
                v = randomNodes[i];


                for (var j = range(3).length - 1; j >= 0; j--) {
                    u = randomNodes[Math.floor(Math.random() * randomNodes.length)];

                    this.graph.addLink(v, u);
                }
                    
                this.graph.addNode(v);


            }
            

            
            
            this.renderer = Viva.Graph.View.renderer(this.graph, {
                graphics : this.graphics,
                container: this.$refs.graphContainer
            });

            this.renderer.run();
     
            //test
            window.graph = this.graph
        }
    }
</script>
<style lang="scss">
        
        svg, #graphContainer {
            width: 100%; 
            height: 100%;
        }


        
</style>

enter image description here

user305883
  • 1,635
  • 2
  • 24
  • 48
  • 1
    `data` in Vue components adds reactivity. As in, Vue tracks and can react to changes in whatever you declare in `data` (with an initial value other than `undefined`). So, in order to get help, it would be really useful if you described the reactivity aspect of your implementation. Which are the changes you want tracked and how do you want Vue to react to those changes? Another important clarification: is your example significantly faster without Vue? – tao Aug 17 '20 at 00:11
  • Hi @tao, your comment surely is key: actually this particular example code is NOT significantly faster without Vue: I simply mounted a graph, not making it reactive to any data changes. In my case I have a graph object; Im using nested vue components to add nodes/links, using a custom layout. I'd like to mutually reflect those changes also on a force-directed graph layout: changes will mostly effect on SVG rendering of elements' position. Due to https://github.com/anvaka/vue-compare, my question is how to intercept data passed through the components, and render the graph layout outside of vue. – user305883 Aug 18 '20 at 08:13

0 Answers0