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.
Could you clarify what you mean by "not presentable"? What are you expecting that is different from the results?
As for your comment about node name not appearing inside the circle - in neovis.js node captions are positioned below the node. As neovis will scale the size of the node relative to a property value we've found this caption positioning to be the most consistently readable.
Oh ok. I was referring to the graphs as presented in Neo4j browser/desktop version look more beautiful and has good features as against the Neovis.js represented version.
I thought maybe there is someway to make it look better.
P.S : I apologize for writing it as 'not presentable' .
Can you point out where in the Neovis.js file can we reduce the size of the relationship names ?
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.
Default styling is pulled in from here: https://github.com/neo4j-contrib/neovis.js/blob/master/src/defaults.js
You should be able to update styling in that visjs object to overwrite the defaults used by neovis.js.
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 -
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.
Hey, welcome to the community. It looks like the size hasn't taken. Have you added any style to the #viz container?
Hello Adam,
Yes, I had added heigth and width for the div. Still it is not working. Please help.
Do you have a repository that replicates your problem online? If not, if you can upload one I will take a look
Thanks Adam for your initiative. I have a repository (https://github.com/soumalyas/neoviztest.git) and presently using a neo4j sandbox which would expire shortly.
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)
Many thanks Adam. Yes, I missed the variable.
Hello everybody,
Does anyone know how to set up the color of edges ?
I would like to put color depending on properties of edges.
Thanks.
Alexandre
Hi Alexandre,
This video might help you link
