anishmprasad / vis-react Goto Github PK
View Code? Open in Web Editor NEWData visualization library based on vis.js
License: MIT License
Data visualization library based on vis.js
License: MIT License
I am trying to add legend but there is no doc for doing it.
Started receiving errors like vis.min.js
of vis-react core
package-
Invalid type received for "bold". Expected: object, string. Received [boolean] "true" Problem value found at: options = { edges: { font: { bold } }}
vis.min.js?71f8:14 Uncaught TypeError: Cannot create property 'face' on boolean 'true'
at a.value (vis.min.js?71f8:14)
at a.value (vis.min.js?71f8:16)
at new a (vis.min.js?71f8:15)
at a.value (vis.min.js?71f8:15)
at a.value (vis.min.js?71f8:15)
at a.value (vis.min.js?71f8:15)
at e.setData (vis.min.js?71f8:13)
at new e (vis.min.js?71f8:13)
at r.value (index.js?ca8d:1)
at r.value (index.js?ca8d:1)```
moreover. thanks for this lib.
when using 'fit' or 'destroy' method of vis.js. how do i write code? events and options props to 'Graph' component is work well. please let me know.
I haven't managed to find any issues so far using React 16. It's quite possible that the transition could go smoothly (I haven't tested everything nor tried). The important changes can be found here
Great lib !
You should add something in the instructions to say we also need to import the CSS from VIS ( http://visjs.org/index.html#download_install ). It can be useful to display tooltips, for example.
Thanks
Have you considered using https://github.com/visjs-community/visjs-network rather than the (now unmaintained) vis.js project as the source for your vis.js dependency?
Is there a way of using visjs methods, like setOptions, what using vis-react?
What I would like to do, is change options after some visjs event is trigged, or change options after stabilization is finished.
For this line,import Graph from 'vis-react';
ES Lint throws an error=>"Unable to resolve path to module vis-react."
The error goes away when changing the main key in package.json from "main": "/dist/index.js" to "main": "./dist/index.js" Requesting to change this so I dont have to fix it whenever I install the package
Am I updating the state right?
this.state = {
exampleGraph:{
nodes: [],
edges: []
}
fetchState(){
//api call with list of values
this.setState({exampleGraph:{nodes: api_res.nodes, edges: api_res.edges})
}
Not the exact code but I'm doing something like this.
which gives me the following error
Error: Cannot add item: item with id 1 already exists
Stacktrace shows:
this.setState(
{
exampleGraph: {nodes:node_list, edges: api_res_edges},
}
add getEdges props for get edges methods
if (this.props.getEdges) { this.props.getEdges(this.edges); }
or create branch for pull requests
Hi, I'd like to change the tooltip content when a node is selected, in order to show its info.
How can I do so?
P.S.
At the moment I'm able to use the (options.) nodes.chosen.node property for doing other things, such logging in console the node data, and when I try to use chose.label to accomplish my task it simply doesn't work.
<Graph graph={{ nodes: this.props.lineageReducer.nodesDisplayed, edges: this.props.lineageReducer.edges, }} options={this.options} events={{ select: (e) => this.expandNode(e), }} />
We read our nodes and edges from redux reducer like so. I have implemented a function that reads data from local storage and sets nodes and edges correctly, I've went into redux and verified it is valid. However, when running my code, an error appears saying that we are adding nodes edges with duplicate id. I debugged through the code and came to the conclusion the in the vis index.js, addNode and addEdge functions are being called twice. I attemted to modify the library code to make a check to prevent it calling again but now icons don't render their image defined by their group correctly. Is someone able to help with this?
When nodes are defined as shape='image' or 'circularImage' and the image is a local PNG file, it loads fine in the initial render. But once the Graph components unmounts and gets mounted again, that node fails to reappear. The branch to the node appears and the node data seems to be identical when inspecting it in the REACT TOOLS of the browser console.
No error is thrown either... Has anyone else faced this issue and possibly found a workaround for this?
The graph's nodes array data looks as follows:
[...,
{"id":2,"label":"","shape":"circularImage","title":"Add Node","level":1,"fixed":{"x":true,"y":true},"size":50,"borderWidthSelected":16,"image":"/images/plus-circle-solid.png","shapeProperties":{"interpolation":true,"useImageSize":false,"borderDashes":false,"useBorderWithImage":true}}]
The image is attached below in case you want to replicate the issue locally.
the hoverEdge function doesn't work on the canvas. I am not getting any console output when I tried to log the event. Looks like the function doesn't get triggered at all. Can we fix this?
vis-react
has a dependency to vis
in package.json as seen here: https://github.com/anishmprasad/vis-react/blob/master/package.json#L13
When vis
has a new commit on the master, the hash value of that dependency changes for that package and cause the failure of the dependency check. The idea is keeping the dependency package always the same for a given particular version of vis
package. It would solve the problem if vis
could point an exact version or commit hash as it was done for lodash
and uuid
as an example.
Hi,
I was wondering if this project is intended to intended to add features on top of https://github.com/crubier/react-graph-vis or to freeze a particular featureset from the past, since the two index.js
and README.md files look very similar.
Hi Anish,
Thanks for you library. We are using it in our product.
We'd like to see navigation buttons using the interaction: { navigationButtons: true }
option. More info at https://almende.github.io/vis/docs/network/interaction.html#
I have tried passing this, but it doesn't seem to have an effect. Here's the code-sandbox: https://codesandbox.io/s/vis-react-s957o (change is in line 165 of visreact.js).
Thanks in advance.
Regards,
Sridhar.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.