////////////////////////////////////////////////////
// SVG setup
////////////////////////////////////////////////////
var svgWidth = 400,
svgHeight = 400;
var svgRef = d3.select("body").append("svg")
.attr("width",svgWidth)
.attr("height",svgHeight);
svgRef.append("rect")
.attr("width", svgWidth)
.attr("height", svgHeight);
////////////////////////////////////////////////////
// Data
////////////////////////////////////////////////////
var nodes_data = [{id: "0"}];
var links_data = [];
////////////////////////////////////////////////////
// Links and nodes setup
////////////////////////////////////////////////////
var linksRef = svgRef.selectAll(".link")
.data(links_data).enter()
.append("line")
.attr("class", "link");
var nodesRef = svgRef
.selectAll(".node")
.data(nodes_data).enter()
.append("g").attr("class", "node")
.append("circle")
.attr("r", 10)
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
////////////////////////////////////////////////////
// Simulation setup
////////////////////////////////////////////////////
var simulation = d3.forceSimulation()
.force("x", d3.forceX(svgWidth / 2))
.force("y", d3.forceY(svgHeight / 2));
simulation.nodes(nodes_data).on("tick", ticked);
simulation.force("link").links(links_data);
function ticked() {
nodesRef.attr("transform", function (d) {return "translate(" + d.x + "," + d.y + ")";})
linksRef.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; });
}
////////////////////////////////////////////////////
// Dragging
////////////////////////////////////////////////////
function dragstarted (d) {
if (!d3.event.active) simulation.alphaTarget(1).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;
}
.link {
stroke: #000;
stroke-width: 2px;
}
.node {
fill: #CCC;
stroke: #000;
stroke-width: 1px;
}
rect {
fill: none;
stroke: #000;
stroke-width: 2px;
pointer-events: all;
}
<script src="https://d3js.org/d3.v5.min.js"></script>