graph2 = {
const height = 300
var n = d3.range(0,50).map(function(d) { return { name:d, } })
var l = [];
n.forEach(function(d,i) { l.push({source:n[0],target:n[i]}) })
const simulation = d3.forceSimulation(n)
.force("link", d3.forceLink(l).strength(1) )
.force("charge", d3.forceManyBody().strength([-30]))
.force("center", d3.forceCenter(width / 2, height / 2))
.on("tick", ticked);
const svg = d3.select(DOM.svg(width, height));
const node = svg
.selectAll("circle")
.data(n)
.enter().append("circle")
.attr("id", function(d) { return "node_"+d.name })
.attr("r", 10)
.attr("stroke-width", "2px")
.style("stroke", "steelblue")
.attr("fill", "white")
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
const link = svg
.selectAll("line")
.data(l)
.enter().insert("line","circle")
.attr("id", function(d,i) { return "link_"+i })
.attr("x1", d=> d.source.x)
.attr("y1", d=> d.source.y)
.attr("x2", d=> d.target.x)
.attr("y2", d=> d.target.y)
.attr("stroke-width", "2px")
.style("stroke", "steelblue")
function ticked() {
node
.attr("cx", d => d.x)
.attr("cy", d => d.y);
link
.attr("x1", d=> d.source.x)
.attr("y1", d=> d.source.y)
.attr("x2", d=> d.target.x)
.attr("y2", d=> d.target.y)
}
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;
}
return svg.node();
}