Hi,
As we use the Neo4j desktop or browser version, we get a beautiful output . Like this -
But when i use the browser version , i get an output that is not presentable and neither does the node name appears inside the circle.
Please help. I want the same output as presented in the Neo4j tool to be displayed in the browser.
1 ACCEPTED SOLUTION
I've just cloned and set the height/width of the container in your index.css file and everything looks good:
#viz {
width: 900px;
height: 1700px;
}
You could also change your render function to set the CSS dynamically using props:
render(){
const viz={
width: '900px',
height: '1700px',
border: '1px solid lightgray',
font: '22pt arial',
}
return (
<div><h1>React Neovis Example</h1>
<div id="viz" style={viz}>
</div>
</div>
);
}
(it looks like you weren't using the viz variable)
No need to apologize - I was just trying to determine what styling aspects you thought were most important and could be improved 
In the image you shared it seems like the readability of the captions could be improved by increasing the length of the relationships and spacing nodes further out. This can be accomplished by reducing the "springiness" of the the relationships for the physics simulation that determines layout and can be configured in vis.js (the underlying visualization library used by neovis.js). Unfortunately, we don't expose much of that configuration in neovis.js. There are a few open issues requesting this.
Neovis.js was originally conceived to have all styling optimized and specified by results of graph algorithms (like centralities, community detection, etc) and most generic graph visualization features are currently lacking or not exposed from vis.js. As more folks are using neovis.js for more generic graph visualization and not necessarily to visualize the results of graph algorithms we'll need to update neovis.js to support these use cases - which is something we want to do. In the mean time, you might have better luck using vis.js directly and then you'll have all of the styling / configuration available.
Hi William,
I searched through a visjs network diagrams and they have the display as expected. Like i would like to keep an image for nodes instead of the circular figures. it is possible in visjs.
But here minor changes in neovis.js file in visjs JSON is not reflected. Like i changed and added a few more key-value pairs like repulsion, avoidOverlap,central Gravity, nodeDistance and changed the fontsize,damping,inherit,scalefactor,etc-
visjs: {
interaction: {
click:true,
hover: true,
hoverConnectedEdges: true,
selectConnectedEdges: false,
// multiselect: true,
multiselect: 'alwaysOn',
zoomView: true,
experimental: { }
},
physics: {
barnesHut: {
damping: 10.9,
avoidOverlap: 1,
centralGravity: 0.2
},
repulsion:{
nodeDistance: 1000,
},
},
nodes: {
mass: 4,
shape: 'neo',
labelHighlightBold: false,
widthConstraint: {
maximum: 40
},
heightConstraint: {
maximum: 40
},
image:'Tata-logo.png',
size :90,
font:{color:'#eeeeee', size: 30},
},
edges: {
hoverWidth: 2,
selectionWidth: 0,
smooth: {
type: 'continuous',
roundness: 0.15
},
font: {
size: 1,
strokeWidth: 0,
align: 'top'
},
color: {
inherit: true
},
arrows: {
to: {
enabled: true,
type: 'arrow',
scaleFactor: 0
}
}
}
}
But nothing seems to reflect in the output.
Please help.
It also gives errors in my angular counterpart but nevertheless it still compiles after giving errors like -
[1]
ERROR in ./src/assets/neovis.js 31333:19
Module parse failed: Unexpected token (31333:19)
You may need an appropriate loader to handle this file type.
| * to the next pending observer.
| */
> this.url = url;
[2]
ERROR in ./src/assets/neovis.js 20783:26
Module parse failed: Unexpected token (20783:26)
You may need an appropriate loader to handle this file type.
| encoding = encoding || state.defaultEncoding;
| if (encoding !== state.encoding) {
> chunk = bufferShim.f
Can you also suggest if i can integrate another outside vis.js file for a network diagram and integrate it with our neovis.js file. Because even if i put an external angular vis.js file , the database info remains in neovis.js.
Like here is the JSfiddle for a network diagram that we can integrate with our neovis.js -
http://jsfiddle.net/e7uodse2/773/
Thank you for your time and consideration.
Hi,
I am using neovis.js and embedded the graph in my web page. However, the graph is of very small size as shown below -
And below is my code in React web app.
I am new to React and neovis and would like to control the height, width, color and other properties in my web app. Please help.
I've just cloned and set the height/width of the container in your index.css file and everything looks good:
#viz {
width: 900px;
height: 1700px;
}
You could also change your render function to set the CSS dynamically using props:
render(){
const viz={
width: '900px',
height: '1700px',
border: '1px solid lightgray',
font: '22pt arial',
}
return (
<div><h1>React Neovis Example</h1>
<div id="viz" style={viz}>
</div>
</div>
);
}
(it looks like you weren't using the viz variable)
I am using Neovis.JS library to showing it on browsers.
It's not looking very clean with 1000 nodes but it's looking very clean in Neo4j desktop verson.
Please suggest me better way to make it more clearable
Hi, just reached this community page while looking out for help on Neovis.
I want to distinguish the nodes on my neovis graph, based on the node type. I have 10 nodes that belong to either of 5 types of nodes / labels. I'm not sure if this page is still active, but will be great if someone can help
(attaching the sample label i gave in code) Thanks in advance
NODES 2022, Neo4j Online Education Summit
All the sessions of the conference are now available online
