Last active
August 29, 2015 14:23
-
-
Save cool-Blue/8d0943d6e4ecd9916eee to your computer and use it in GitHub Desktop.
nodesNaN
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "nodes":[ | |
| {"name":"a", "group":1}, | |
| {"name":"b", "group":2}, | |
| {"name":"c", "group":3}, | |
| {"name":"d", "group":4}, | |
| {"name":"e", "group":5}, | |
| {"name":"f", "group":6}, | |
| {"name":"g", "group":7}, | |
| {"name":"h", "group":1}, | |
| {"name":"i", "group":2}, | |
| {"name":"j", "group":3}, | |
| {"name":"k", "group":4}, | |
| {"name":"l", "group":5}, | |
| {"name":"m", "group":6}, | |
| {"name":"n", "group":7} | |
| ], | |
| "links":[ | |
| {"source":0,"target":1,"value":1}, | |
| {"source":2,"target":3,"value":1}, | |
| {"source":4,"target":5,"value":1}, | |
| {"source":7,"target":8,"value":1}, | |
| {"source":9,"target":10,"value":1}, | |
| {"source":11,"target":12,"value":1}, | |
| {"source":0,"target":5,"value":1}, | |
| {"source":1,"target":5,"value":1}, | |
| {"source":0,"target":6,"value":1}, | |
| {"source":1,"target":6,"value":1}, | |
| {"source":0,"target":7,"value":1}, | |
| {"source":1,"target":7,"value":1}, | |
| {"source":2,"target":8,"value":1}, | |
| {"source":3,"target":8,"value":1}, | |
| {"source":2,"target":9,"value":1}, | |
| {"source":3,"target":9,"value":1}, | |
| {"source":4,"target":11,"value":1}, | |
| {"source":5,"target":11,"value":1}, | |
| {"source":9,"target":12,"value":1}, | |
| {"source":10,"target":12,"value":1}, | |
| {"source":11,"target":13,"value":1}, | |
| {"source":12,"target":13,"value":1} | |
| ] | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <style> | |
| .link { | |
| stroke: #2E2E2E; | |
| stroke-width: 2px; | |
| } | |
| .node { | |
| stroke: #fff; | |
| stroke-width: 2px; | |
| } | |
| .textClass { | |
| stroke: #323232; | |
| font-family: "Lucida Grande", "Droid Sans", Arial, Helvetica, sans-serif; | |
| font-weight: normal; | |
| stroke-width: .5; | |
| font-size: 14px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!--<script src="d3 CB.js"></script>--> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <script> | |
| d3.json("data.json", function (error, graph) { | |
| if (error) throw error; | |
| function chart(elementName) { | |
| // look for the node in the d3 layout | |
| var findNode = function (name) { | |
| for (var i in nodes) { | |
| if (nodes[i].name === name) return nodes[i]; | |
| } | |
| }; | |
| var width = 960, // default width | |
| height = 450, // default height | |
| color = d3.scale.category10(), | |
| nodes = graph.nodes, | |
| force = d3.layout.force() | |
| .nodes(nodes) | |
| .links([]), | |
| vis, | |
| runOnceFlag = true; | |
| vis = d3.select(elementName) | |
| .append("svg:svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .attr("id", "svg") | |
| .attr("pointer-events", "all") | |
| .attr("viewBox", "0 0 " + width + " " + height) | |
| .attr("perserveAspectRatio", "xMinYMid") | |
| .append('svg:g'); | |
| var update = function () { | |
| var link = vis.selectAll("line") | |
| .data(force.links(), function (d) { | |
| return d.source + "-" + d.target; | |
| }); | |
| link.enter().insert("line", "g") | |
| .attr("id", function (d) { | |
| return d.source + "-" + d.target; | |
| }) | |
| .attr("stroke-width", function (d) { | |
| return d.value / 10; | |
| }) | |
| .attr("class", "link") | |
| .style("stroke", "red") | |
| .transition().duration(5000).style("stroke", "black"); | |
| link.append("title") | |
| .text(function (d) { | |
| return d.value; | |
| }); | |
| link.exit().remove(); | |
| var node = vis.selectAll("g.node") | |
| .data(nodes, function (d) { | |
| return d.name; | |
| }); | |
| var nodeEnter = node.enter().append("g") | |
| .attr("class", "node") | |
| .call(force.drag); | |
| nodeEnter.append("svg:circle") | |
| .attr("r", 12) | |
| .attr("id", function (d) { | |
| return "Node;" + d.name; | |
| }) | |
| .attr("class", "nodeStrokeClass") | |
| .attr("fill", function (d) { | |
| return color(d.group); | |
| }); | |
| nodeEnter.append("svg:text") | |
| .attr("class", "textClass") | |
| .attr("x", 14) | |
| .attr("y", ".31em") | |
| .text(function (d) { | |
| return d.name; | |
| }); | |
| node.exit().remove(); | |
| 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("transform", function (d) { | |
| console.log(d); | |
| return "translate(" + d.x + "," + d.y + ")"; | |
| }); | |
| }); | |
| // Restart the force layout. | |
| force | |
| .charge(-120) | |
| .linkDistance(function (d) { | |
| return d.value * 100 | |
| }) | |
| .size([width, height]) | |
| .start(); | |
| }; | |
| update(); | |
| var c = {"source": findNode('a'), "target": findNode('b'), value: 1} | |
| window.setTimeout(function() { | |
| force.links().push(c); | |
| update() | |
| },2000) | |
| }; | |
| // | |
| chart('body'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment