Coloring can be done in d3 via svg attributes or vis css (static) What exactly do you want to animate? From where to where?
Von meinem iPhone gesendet > Am 24.02.2015 um 02:12 schrieb Samantha Zeitlin <[email protected]>: > > 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]>: >>> >>> >>> 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]. >>> 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. -- 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.
