jexp / neo4j-3d-force-graph Goto Github PK

Hi, I watched your awsome video from youtube. I am just trying to reimplement the react version such that the query from database can be executed without clicking the reload button. I tried something below but it doesnt work. It gives the error TypeError: Cannot read properties of undefined (reading 'filter'). Can you please help? Thanks

componentDidMount() {
var that=this
const driver = neo4j.driver("bolt://demo.neo4jlabs.com", neo4j.auth.basic("gameofthrones", "gameofthrones"),{encrypted: true});
const session = driver.session({database:"gameofthrones"});

session
  .run('MATCH (n)-[r:INTERACTS1]->(m) RETURN { id: id(n), label:head(labels(n)), community:n.louvain, caption:n.name, size:n.pagerank } as source, { id: id(m), label:head(labels(m)), community:n.louvain, caption:m.name, size:m.pagerank } as target, {weight:r.weight, type:type(r), community:case when n.community < m.community then n.community else m.community end} as rel LIMIT $limit', {limit: neo4j.int(5000)})
  .then(function (result) {
    const nodes = {}
    const links = result.records.map(r => { 
       var source = r.get('source');source.id = source.id.toNumber();
       nodes[source.id] = source;
       var target = r.get('target');target.id = target.id.toNumber();
       nodes[target.id] = target;
       var rel = r.get('rel'); if (rel.weight) { rel.weight = rel.weight.toNumber(); }
       return Object.assign({source:source.id,target:target.id}, rel);
    });
  that.setState({ data: {nodes, links}, loading: false });
})

}

render() {
return(

beautiful 3d relationship maps , but the all sample can not open , would you help to check why ? it's seems like the datasource was use a local url .

thanks

Hi Micheal,

Do you know if its possible to define the color of the nodes. For example:

I want to make the lightblue nodes, red. This is my code:

const elem = document.getElementById('viz');
const driver = neo4j.v1.driver("bolt://localhost", neo4j.v1.auth.basic("neo4j", "test"),{encrypted: true});
const session = driver.session();
const start = new Date()
session
.run("MATCH (n)-->(m) RETURN { id: id(n), label:head(labels(n)), caption:n.name } as source, { id: id(m), label:head(labels(m)), caption:m.name } as target LIMIT $limit", {limit: 4000})
.then(function (result) {
const nodes = {}
const links = result.records.map(r => {
var source = r.get('source');source.id = source.id.toNumber();
nodes[source.id] = source;
var target = r.get('target');target.id = target.id.toNumber();
nodes[target.id] = target;
return {source:source.id,target:target.id}
});
session.close();
console.log(links.length+" links loaded in "+(new Date()-start)+" ms.")
const gData = { nodes: Object.values(nodes), links: links}
const Graph = ForceGraph3D()
(document.getElementById('viz'))
.graphData(gData)
.nodeLabel(node => <span style="color: black">${node.label}: ${node.caption}</span>)
.nodeAutoColorBy('label')
.linkDirectionalParticles(2)
.linkDirectionalParticleWidth(2)
.linkDirectionalParticleColor(() => 'grey')
.nodeVal(5)
.linkColor('black')
.backgroundColor('#ffffff')
.linkWidth(2)
.nodeResolution(30)
.nodeOpacity(1)
.linkColor(link => link.color ? '#000000' : '#000000' )
.onNodeHover(node => elem.style.cursor = node ? 'pointer' : null)
.onNodeClick(node => {
// Aim at node from outside it
const distance = 160;
const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z);
Graph.cameraPosition(
{ x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }, // new position
node, // lookAt ({ x, y, z })
30000 // ms transition duration
);
})
});

I cannot find it anywhere if this is even possible.

Thank you in advance

Hi, there, when I apply it to my laptop localhost, it failed and I has changed the bolt, user and password.
The browser says WebSocket connection to wss and ERR_CERT_AUTHORITY_INVALID.

I have tried modifying the code to obtain captions to the relationship arrows, but haven't been able to do so as of now. Could you please help me with the same.

Hello Michael thanks for posting this repo and doing the YouTube tutorial. You're a super guy.

Without altering any of the files in this repo, I'm running into an issue where the reload button isn't rerendering the neo4j query no matter what I type into the text box.

Please Advise, Thanks

Hi Michael,

First off i would like to say that i really like this libary in combination with Neo4j :) The visualisation look amazing. That said i was wondering if it's possible to display the data caption, partial in the node in a 2D graph? Like this image:

Very basic question -

I've connected to a database, and the graph renders as defined in CypherViz.js. However, I can't figure out how to render the html code in particles.html / color.html / incremental.html / index.html. I've tried modifying the address, i.e. http://localhost:3000/particles.html, as it seemed comparable to https://rawgit.com/jexp/neo4j-3d-force-graph/master/particles.html, but clearly this is not the solution.

Sorry, I know that this is a very basic react / javascript question.