svg布局中的D3.js V5树

我在body元素中创建了三个svg画板，我想在第一个svg中创建一个树布局。但树布局总是显示在最后一个。我在代码中找不到错误。第三季度

生成html：

我的d3.js（v5）代码如下所示：

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)')

---

我已经找到了原因。我创建了多个d3。select（'doby'）。append（'svg'）命名为svg，当我用svg1、svg2命名其他人时，问题就解决了。我已经找到了原因。我创建了不止一个d3.select（'doby'）。append（'svg'）命名为svg，当我用svg1、svg2命名其他d3时，问题就解决了