I'd like to try something similar, but I want to be able to change the colors (nodes and/or relationships, whatever is easiest) and animate that (slowly enough that a human can actually watch it go). Do you have any examples where you've done that? I can imagine that it should be doable with d3.
On Tuesday, February 3, 2015 at 2:40:42 PM UTC-8, Michael Hunger wrote: > > Could you try to use the d3 version that we use here: > > > https://github.com/neo4j-contrib/developer-resources/blob/gh-pages/language-guides/assets/index.html#L87 > http://d3js.org/d3.v3.min.js > > In action: http://my-neo4j-movies-app.herokuapp.com/ > > Michael > > Am 03.02.2015 um 21:29 schrieb Arvind Upadhyay <[email protected] > <javascript:>>: > > > hello guys, this question is more d3 centric than neo4j based. I copied > the example from neo4j website for visualization and it does not seem to > work. > > I am using latest version of d3.js to prototype visualization using neo4j. > Error seems to be from d3.js library itself > Uncaught TypeError: Cannot read property 'weight' of undefined d3.min.js:4 > > > here is the code i copied from neo4j site ("dependencyManager" is the id > of svg element) > > > res = > {"nodes":[{name:"Peter",label:"Person",id:1},{name:"Michael",label:"Person",id:2}, > {name:"Neo4j",label:"Database",id:3}], > "links":[{start:0, end:1, type:"KNOWS", since:2010},{start:0, end:2, > type:"FOUNDED"}, > {start:1, end:2, type:"WORKS_ON"}]}; > > var graph = > {"nodes":[{name:"Peter",label:"Person",id:1},{name:"Michael",label:"Person",id:2}, > {name:"Neo4j",label:"Database",id:3}], > "links":[{start:0, end:1, type:"KNOWS", since:2010},{start:0, end:2, > type:"FOUNDED"}, > {start:1, end:2, type:"WORKS_ON"}]}; > > var width = 800, height = 800; > // force layout setup > var force = d3.layout.force() > .charge(-200).linkDistance(30).size([width, height]); > > // setup svg div > var svg = d3.select("#dependencyManager") > .attr("width", "100%").attr("height", "100%") > .attr("pointer-events", "all"); > > // load graph (nodes,links) json from /graph endpoint > > > force.nodes(graph.nodes).links(graph.links).start(); > > // render relationships as lines > var link = svg.selectAll(".link") > .data(graph.links).enter() > .append("line").attr("class", "link"); > > // render nodes as circles, css-class from label > var node = svg.selectAll(".node") > .data(graph.nodes).enter() > .append("circle") > .attr("class", function (d) { return "node "+d.label }) > .attr("r", 10) > .call(force.drag); > > // html title attribute for title node-attribute > node.append("title") > .text(function (d) { return d.title; }) > > // force feed algo ticks for coordinate computation > force.on("tick", function() { > link.attr("x1", function(d) { return d.source.x; }) > .attr("y1", function(d) { return d.source.y; }) > .attr("x2", function(d) { return d.target.x; }) > .attr("y2", function(d) { return d.target.y; }); > > node.attr("cx", function(d) { return d.x; }) > .attr("cy", function(d) { return d.y; }); > }); > > -- > You received this message because you are subscribed to the Google Groups > "Neo4j" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected] <javascript:>. > For more options, visit https://groups.google.com/d/optout. > > > -- You received this message because you are subscribed to the Google Groups "Neo4j" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. For more options, visit https://groups.google.com/d/optout.
