Built with blockbuilder.org
xxxxxxxxxx<meta charset="utf-8"><style>.links line { stroke: #999; stroke-opacity: 0.6;}.nodes circle { stroke: #fff; stroke-width: 1.5px;}/*.nodes text { pointer-events: none; font: 10px sans-serif;}*/</style><svg width="960" height="600"></svg><script src="https://d3js.org/d3.v4.min.js"></script><script>var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height");svg.append("defs").append("marker") .attr("id", "arrow") .attr("viewBox", "0 -5 10 10") .attr("refX", 20) .attr("refY", 0) .attr("markerWidth", 8) .attr("markerHeight", 8) .attr("orient", "auto") .append("svg:path") .attr("d", "M0,-5L10,0L0,5");var color = d3.scaleOrdinal(d3.schemeCategory20);var simulation = d3.forceSimulation() .force("link", d3.forceLink()) .force("charge", d3.forceManyBody().strength(-300)) .force("center", d3.forceCenter(width / 2, height / 2));// var force = d3.layout.force()// .nodes(dataset.nodes)// .links(dataset.edges)// .size([w, h])// .linkDistance([50])// .charge([-100])// .start();d3.json("graph.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); }) .attr("marker-end", "url(#arrow)"); // var node = svg.append("g") // .attr("class", "nodes") // .selectAll("circle") // .data(graph.nodes) // .enter().append("g"); // node.append("circle") // .attr("r", 5) // .attr("fill", function(d) { return color(d.group); }) // .call(d3.drag() // .on("start", dragstarted) // .on("drag", dragged) // .on("end", dragended)); // node.append("title") // .text(function(d) { // return d.id; // }); // node.append("text") // .attr("dx", 12) // .attr("dy", ".35em") // .text(function(d) { return d.id });var node = svg.selectAll("g") .data(graph.nodes) .enter() .append("g").call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended));node.append("circle") .attr("r", 5) .style("fill", function (d, i) { return color(i); })node.append("text") .attr("x", 12) .attr("dy", ".35em") .text(function (d) { return d.id; }); 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; }); // this.childNodes[1].setAttribute("transform", "translate(" + d.x + "," + d.y + ")"); // node // .attr("cx", function(d) { return d.x; }) // .attr("cy", function(d) { return d.y; }); // var updateNode = function() { node.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> https://d3js.org/d3.v4.min.js