I just observed that there are too many questions regarding resetting a cytoscape.js graph to its originally loaded state.
Following is a simple function you need to call to reset the graph:
cy.layout();
You can bind it to click events as and when needed.
Cheers!
To reset to original state:
cy.layout();
To fit the randomly panned/zoomed graph to the div:
cy.fit();
Hope it helps!
Related
I want to add actions for when the user clicks on an object from a Paths layers. I notice that I really need to click in the middle of each path for this to happen. Is it somehow possible to increase that radius so when the user clicks even just a bit near that object the on-click action would trigger? Couldn't find such property for any layer.
I think you are looking for pickingRadius, check this out.
You should be able to apply that on Deck instance.
With React:
<DeckGL
...otherProps
pickingRadius={10}
>
With vanilla JS:
const deckgl = new Deck({
...otherProps,
pickingRadius: 10
});
The basic example of snackbar for Material Design Components for Web doesn't work. It produces the error:
```
TypeError: snackbar.show is not a function
```
I have tried using jQuery to make sure the DOM loaded properly. I have tried changing back and forth the javascript initialisation methods, but none seems to work.
You can find the code here: https://jsbin.com/mejefeq/edit?html,console,output
I have read the docs over and overs again, but none of it mentioned anything about this. Since this MDC for Web is not at all popular, I have nowhere left to go for help.
Yeah that was a breaking change in the 0.43.0 update. The new way of showing the snackbar is by using
snackbar.open();
This however will just open the snackbar. If you want to change the text in the snackbar you can use:
snackbar.labelText = 'Your new text';
So together you can use them:
snackbar.labelText = 'Your new text';
snackbar.open();
You can check out more of the documentation here, with the current javascript properties and events here
I have to code a web application and the most important element is the q-tree. I'm already able to load and show data (passing an array called list), but I want that all nodes are expanded.
The vue.js examples of the official documentation show that you're be able to do this with the 'default-expand-all' attribute but this isn't working for me.
It only shows me the root node with an arrow, where I have to expand the children nodes manually.
<q-tree
:nodes="list"
:selected.sync="selected"
#update:selected="onSelectionChangedNode"
node-key="NodeNr"
label-key="NodeTxt"
default-expand-all
></q-tree>
Taking a cue from the accepted answer, I realised that the dom has already been created with the tree component on first render.
In my use case, I want to update the Tree when data comes back from the server.
So, I had to force it to re-render with the expanded functionality using:
this.$nextTick(function () {
this.$refs.nodes.expandAll();
})
The nextTick function will update the dom in the next window of execution, by which time the nodes will get expanded by calling the expandAll function.
And NB: For those confused by the astericks on the ref attribute or how to add it to the component, here goes:
<q-tree :nodes="list"
:selected.sync="selected"
#update:selected="onSelectionChangedNode"
node-key="NodeNr"
label-key="NodeTxt"
ref="nodes"
>
Solved my problem as following:
I have added a ref attribute to the QTree DOM Element which makes it possible to access predefined methods of QTree API.
<q-tree
:nodes="list"
:selected.sync="selected"
#update:selected="onSelectionChangedNode"
node-key="NodeNr"
label-key="NodeTxt"
**ref="nodes"**
>
The function I have been using is expandAll().
updated() {
this.$refs.nodes.expandAll();
}
The most important thing for me was, I had to find out which lifecycle hook was the right one for me. The update() hook was the one I was looking for.
The reason:
Called after a data change causes the virtual DOM to be re-rendered and
patched.
The component’s DOM will have been updated when this hook is called, so you
can perform DOM-dependent operations here.
The default-expand-all is only applied on the first rendering of that Component.
So if your Component renders when the nodes aren't assigned they wont expand if assigned afterwards.
https://v1.quasar-framework.org/vue-components/tree
You have to work with scoped slots and an expanded attribute if you dont have the nodes on first rendering.
I have created a cytoscape.js graph. Users are allowed to click and zoom/drill down on any node to see all the neighboring nodes and edges. I need to add a reset button, that will restore the graph to it's original position, i.e. when the page was first loaded. I have tried using a couple of different functions such as cy.load, forcerender, cy.destroy and recreate graph. Only thing left is to clear the entire object from the dom and add another cytoscape graph object. I would like to know if there is a simple way I can do a redraw or reload the entire graph. I have all the details (original styles/node data) stored in an array.
Thanks
Save the positions and then restore them whenever you want with nodes.positions(): http://js.cytoscape.org/#nodes.positions
Or save the element JSONs and then later restore them: http://js.cytoscape.org/#ele.json
How is it possible to replay the animation on a chart create with chart.js ?
Is there a specific function ? Or may I recall and reconstruct my chart ?
I'm not aware of how to do this within chart.js but if you provide code I maybe able to help further.
You could put your chart within a setInterval, if you create it outside the setInterval it will be shown on page load and then again within the setInterval and it will be repeated at the specified time.
Further information on setInterval is available here - http://www.w3schools.com/jsref/met_win_setinterval.asp.