Built with blockbuilder.org
xxxxxxxxxx<meta charset="utf-8"><style>.node { stroke: #fff; stroke-width: 1.5px;}.link { stroke: #999;}body {font-family: graphik,Helvetica,Arial,sans-serif;}</style><body><script src="https://d3js.org/d3.v4.min.js"></script><script>var width = 1500, height = 950;var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height);d3.json("data_objects2.json", function(error, graph) { if (error) throw error; graph.links.forEach(function(d) { d.source = graph.nodes[d.source]; d.target = graph.nodes[d.target]; }); var link = svg.append("g") .attr("class", "link") .selectAll("line") .data(graph.links) .enter().append("line") .style("stroke", "#aaa") .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; }); var node = svg.append("g") .attr("class", "node") .selectAll("circle") .data(graph.nodes) .enter().append("circle") .attr("r", 20) .style("fill", function(d) { return d.color; }) .style("stroke", "#969696") .style("stroke-width", "1px") .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }) .call(d3.drag().on("drag", dragged)); var label = svg.append("g") .attr("class", "labels") .selectAll("text") .data(graph.nodes) .enter().append("text") .attr("class", "label") .attr("x", function(d) { return d.x+15; }) .attr("y", function (d) { return d.y; }) .style("font-size", "20px").style("fill", "#000000") .text(function(d) { return d.id; }); function dragged(d) { d.x = d3.event.x, d.y = d3.event.y; d3.select(this).attr("cx", d.x).attr("cy", d.y); link.filter(function(l) { return l.source === d; }).attr("x1", d.x).attr("y1", d.y); link.filter(function(l) { return l.target === d; }).attr("x2", d.x).attr("y2", d.y); label.filter(function(l) { return l === d; }).attr("x", d.x+15).attr("y", d.y); }});</script> https://d3js.org/d3.v4.min.js