title: D3.js V5 tree in svg layout
body: <p><em>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</em></p>
  
  <p>result in html:
  <a href="https://i.stack.imgur.com/hJPyP.png" rel="nofollow noreferrer">html result</a></p>
  
  <p>my d3.js(v5) code shown below:</p>
  
  <pre><code>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)')
  </code></pre>