D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
mfgjunqueira
Full window
Github gist
Teste Nox
<!DOCTYPE html> <meta charset="utf-8"> <style> .link { stroke: #3C4856; stroke-width: 1.5; opacity: 0.5; } .node text { pointer-events: none; font: 15px sans-serif; fill: #212B7B; opacity: 0.8; } </style> <body> <script src="https://d3js.org/d3.v3.min.js"></script> <script> var width = 1200, height = 600 var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); svg.append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", "lightgrey"); var force = d3.layout.force() .gravity(.001) .distance(260) .charge(1) .size([width, height]); d3.json("noxteam.json", function(error, json) { force .nodes(json.nodes) .links(json.links) .start(); var link = svg.selectAll(".link") .data(json.links) .enter().append("line") .attr("class", "link"); var node = svg.selectAll(".node") .data(json.nodes) .enter().append("g") .attr("class", "node") .call(force.drag); node.append("image") .attr("xlink:href", function(d) { return "https://www.nox4think.com.br/imgs/" + d.ind + ".png";}) .attr("x", -40) .attr("y", -40) .attr("width", 80) .attr("height", 80); node.append("text") .attr("text-anchor", "middle") .attr("dx", 0) .attr("dy", 55) .text(function(d) { return d.name }); 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) { return "translate(" + d.x + "," + d.y + ")"; }); }); }); </script>
Modified
http://d3js.org/d3.v3.min.js
to a secure url
https://d3js.org/d3.v3.min.js