Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>grSpotify</title>
- <style>
- .nodes circle {
- fill: #ccc;
- stroke: #fff;
- stroke-width: 3px;
- stroke-opacity: 0.8;
- }
- .links line {
- stroke: #777;
- stroke-width: 1.5px;
- stroke-opacity: 0.6;
- }
- .gnode text {
- font: 10px sans-serif;
- transform: translate(5px, 0px);
- }
- </style>
- </head>
- <body>
- <svg width="1024" height="768"></svg>
- <script src="http://d3js.org/d3.v4.min.js"></script>
- <script>
- var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height");
- var color = d3.scaleOrdinal(d3.schemeCategory20);
- var simulation = d3.forceSimulation()
- .force("link", d3.forceLink().id(function(d) { return d.id; }))
- .force("charge", d3.forceManyBody().strength(-500))
- .force("center", d3.forceCenter(width/2, height/2));
- d3.json("data.json", function(error, graph) {
- if (error) throw error;
- var link = svg.append("g").attr("class", "links")
- .selectAll("line")
- .data(graph.links)
- .enter().append("line")
- .attr("stroke-width", function(d) { return Math.sqrt(d.value); });
- var gnodes = svg.selectAll("g.gnode")
- .data(graph.nodes)
- .enter()
- .append("g")
- .classed("gnode", true);
- var node = gnodes.append("circle")
- .attr("class", "nodes")
- .attr("r", 5)
- .style("fill", function(d) { return color(d.group); })
- .call(d3.drag()
- .on("start", dragstarted)
- .on("drag", dragged)
- .on("end", dragended));
- gnodes.append("title").text(function(d) { return d.label });
- var labels = gnodes.append("text").text(function(d) { return d.label; });
- labels.attr("transform", function(d) {
- return "translate(" + (d.x) + "," + (d.y) + ")";
- });
- simulation.nodes(graph.nodes).on("tick", ticked);
- simulation.force("link").links(graph.links);
- function ticked() {
- 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; });
- gnodes
- //node
- .attr("transform", function(d) {
- return "translate(" + [d.x, d.y] + ")";});
- labels.attr("transform", function(d) { return "translate(" + (d.x) + "," + (d.y) + ")"; });
- }
- });
- function dragstarted(d) {
- if (!d3.event.active) simulation.alphaTarget(0.3).restart();
- d.fx = d.x;
- d.fy = d.y;
- }
- function dragged(d) {
- d.fx = d3.event.x;
- d.fy = d3.event.y;
- }
- function dragended(d) {
- if (!d3.event.active) simulation.alphaTarget(0);
- d.fx = null;
- d.fy = null;
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement