D3.js V5 tree in svg layout - d3.js

Question

I create three svg paint board in body element, and i want create a tree layout in first svg. But the tree layout always show at last one. I can't find some error in my codes. 3Q
result in html:
html result
my d3.js(v5) code shown below:
var svg = body.append('svg')
.attr('width', width)
.attr('height', height)
svg.append('rect')
.attr('width', '100%')
.attr('height', '100%')
.attr('fill', 'rgb(255, 100, 100)')
d3.json('map_tree.json').then(function(datas){
var root = d3.hierarchy(datas)
var tree = d3.tree()
.size([height, width-120])
.separation(function separation(a, b){
return a.parent == b.parent ? 1:2
})
tree(root)
svg.append('g')
.selectAll('circle')
.data(root.descendants())
.enter()
.append('circle')
.attr('r', 4)
.attr('transform', 'translate(50, 0)')
.attr('fill', 'white')
.attr('stroke', 'blue')
.attr('stroke-width', 1)
.attr('cx', function(d, i){
return d.y
})
.attr('cy', function(d, i){
return d.x
})
.attr('cx', function(d, i){
return d.y
})
.attr('cy', function(d, i){
return d.x
})
var svg = body.append('svg')
.attr('width', width)
.attr('height', height)
svg.append('rect')
.attr('width', '100%')
.attr('height', '100%')
.attr('fill', 'rgb(100, 255, 100)')
var svg = body.append('svg')
.attr('width', width)
.attr('height', height)
svg.append('rect')
.attr('width', '100%')
.attr('height', '100%')
.attr('fill', 'rgb(100, 100, 255)')

Answer 1

I hava found the reason. I created more than one d3.select('doby').append('svg') named svg, and the problem has gone when i named others with svg1、svg2