d3.js - force simulation graph not visiable - d3.js

Question

I would like to draw force simulation but the nodes not show on page correctly!
demo()
function demo() {
var width = 600, height = 400;
var svg = d3.select('body').append('svg')
.attr('width',width)
.attr('height',height)
.style('border','1px solid red')
var g = svg.append('g')
var colorScale = ['orange', 'lightblue', '#B19CD9'];
var xCenter = [width/4, width*2/4, width*3/4];
var numNodes = 100;
var nodes1 = d3.range(numNodes).map(function(d, i) {
return {
radius: 15,// Math.random() * 25,
category: i % 3
}
});
var links = [
{source: 0, target: 1},
{source: 0, target: 2},
{source: 0, target: 3},
{source: 1, target: 6},
{source: 3, target: 4},
{source: 3, target: 7},
{source: 4, target: 5},
{source: 4, target: 7}
]
var radius = 8
var nodes = []
links.forEach(function(d) {
nodes[d.source] ||
(nodes[d.source] = {name:d.source})
nodes[d.target] ||
(nodes[d.target] = {name:d.target})
})
var simulation = d3.forceSimulation(nodes)
.force("collide", d3.forceCollide(radius))
.force("x", d3.forceX().x(function(d) {return width/2;}).strength(5))
.force("y", d3.forceY().y(function(d) {return d.dy;}).strength(.5))
var debug = true
if (debug) {
simulation.tick(10).stop();
ticked()
}else {
simulation.on('tick', ticked);
}
function ticked() {
d3.select('g').selectAll('.link')
.data(links)
.join('path')
.attr('class','link')
.attr('stroke','black')
.attr('d',function(d) {
var path = ['M',d.source.x,d.source.y,'L',
d.target.x,d.target.y]
return path.join(' ')
})
d3.select('g').selectAll('circle')
.data(nodes)
.join('circle')
.attr('r', function(d) {
return radius;
})
.style('fill', function(d) {
return colorScale[0];
})
.attr('cx', function(d) {
return d.x;
})
.attr('cy', function(d) {
return d.y;
});
}
}
<script src="https://unpkg.com/d3#7.0.4/dist/d3.min.js"></script>