Unable to insert zoom in and zoom out buttons inside neovis.js

neovis

(Sucheta) #1

Hi,

As i believe Neovis.js is made from vis.js graph network, i tried to implement built in interactiveButtons option in the vis options . But it is not wokring. Can you please help in implementing a physical zoom-in and zoom-out button in Neovis.js. The code snippet is -

         onCompleted: function () {
                session.close();
               
        
              let options = {

                 interaction: {
                    navigationButtons: true,
                    keyboard: true
                },
                
                nodes: {
                    shape: 'dot',
                    font: {
                        size: 26,
                        strokeWidth: 7
                    },
                    scaling: {
                        label: {
                            enabled: true
                        }
                    }
                },
                edges: {
                    arrows: {
                        to: {enabled: self._config.arrows || false } // FIXME: handle default value
                    },
                    length: 200
                },
                layout: {
                    improvedLayout: false,
                    hierarchical: {
                        enabled: self._config.hierarchical || false,
                        sortMethod: self._config.hierarchical_sort_method || "hubsize"

                    }
                },

              };

          //code
           }

vis.js reference - http://visjs.org/docs/network/interaction.html#

Awaiting a reply.


(Sucheta) #2

Thank you. I successfully implemented a manual zoom-in, zoom-out button in the Neovis.js screen by inserting interaction option -

   onCompleted: function () {
                session.close();
               
                          
              let options = {

                nodes: {
                    shape: 'dot',
                    font: {
                        size: 26,
                        strokeWidth: 7
                    },
                    scaling: {
                        label: {
                            enabled: true
                        }
                    }
                },

                interaction: {
                    hover: true,
                    keyboard: {
                        enabled: true,
                        bindToWindow: false
                    },
                    navigationButtons: true,
                    tooltipDelay: 1000000,
                    hideEdgesOnDrag: true,
                    zoomView: false
                },

                edges: {
                    arrows: {
                        to: {enabled: self._config.arrows || false } // FIXME: handle default value
                    },
                    length: 200
                },
                layout: {
                    improvedLayout: false,
                    hierarchical: {
                        enabled: self._config.hierarchical || false,
                        sortMethod: self._config.hierarchical_sort_method || "hubsize"

                    }
                },

              };

            var container = self._container;
            self._data = {
                "nodes": new vis.DataSet(Object.values(self._nodes)),
                "edges": new vis.DataSet(Object.values(self._edges))

            }

            console.log(self._data.nodes);
            console.log(self._data.edges);
            
          
            self._network = new vis.Network(container, self._data, options);
            console.log("completed");
            setTimeout(() => { self._network.stopSimulation(); }, 10000);

            self._events.generateEvent(CompletionEvent, {record_count: recordCount});

            },
            onError: function (error) {
              console.log(error);
            }

        })
    };

Reference link - https://github.com/almende/vis/issues/3021


(Michael Hunger) #3

Perhaps you can send a pull request to neovis


(Sucheta) #4

Okay. I have implemented a spinner also inside neovis, so that till the data loads , we get a spinner asking the user to wait.


(Sucheta) #6

Hi Michael,

I am unable to push it into the neovis.js git account. I am unable to do that because -

I guess the master is empty that's why.
Please suggest.


(Michael Hunger) #7

You need to make a fork and do the edits in your fork and then send a pull request.