search

eisman / neo4jd3

Neo4j graph visualization using D3.js
https://eisman.github.io/neo4jd3/
MIT License
1.37k stars 422 forks source link

How to run this. #52

Closed CrashLaker closed 5 years ago

CrashLaker commented 5 years ago

Hi all.

Im trying to figure out how to run this as a function without that window.load = init.

Can anyone help me clarify this?

Thanks. C.

Degooya commented 5 years ago

Hi, do you mean without npm and Node.js as server ?

CrashLaker commented 5 years ago

Hi. Thank you for your reply.

I'm able to run this "natively" but I'm trying to add this to my Vue app and I'm not sure how to get it working.

Adding init() to a button event or inside mounted() renders nothing and also prints out no errors at the console.

Degooya commented 5 years ago

init is just the function where the declaration is happening

function init() { var neo4jd3 = new Neo4jd3('#neo4jd3', {......

and then it gets called on window.load

maybe just put the declaration var neo4jd3 = new Neo4jd3('#neo4jd3', {...... on a button onClick event

Degooya commented 5 years ago

But it's much more likely that it's not working with Vue, React etc. see this post for example https://github.com/eisman/neo4jd3/issues/50

CrashLaker commented 5 years ago

In my case I get no errors but nothing really gets printed out on either console or on the screen.

function init() { var neo4jd3 = new Neo4jd3('#neo4jd3', {...... My guess is that calling init() doesn't really run the code but rather instanciate it. Am I wrong?

Degooya commented 5 years ago

yea but it should be enough, because in the Neo4jd3 object, you have this line which is getting called init(_selector, _options); you could also try one of these methods appendRandomDataToNode, neo4jDataToD3Data, randomD3Data, size, updateWithD3Data, updateWithNeo4jData, version or show me your code.

CrashLaker commented 5 years ago

Hi @Degooya

Got it to work! Yay! Idk what I was doing wrong though. My guess was that I was trying to mix too much outside functions (jquery, neo4jd3) + vue functions + vue variables.

Instanciating it like you said did the job. Other helper functions (onNodeclock, onNodeDragStart, ..) are also working.

this.neo4j = new Neo4jd3('#neo4jd3', {
                    minCollision: 60,
                    neo4jData: this.data,
                    nodeRadius: 25
                })

thank you so much :)

tkokto commented 4 years ago

How to use it in Vue app？？ Thanks.