title: Added DOM Element through D3 not showing
body: <p>I am trying to add some text to a Diagram (<code>createLegend()</code>).</p>
  
  <p><a href="http://jsfiddle.net/gs6rehnx/2045/" rel="nofollow noreferrer">http://jsfiddle.net/gs6rehnx/2045/</a></p>
  
  <pre><code>&lt;button type="button" onclick="createPie()"&gt;Click Me First!&lt;/button&gt;
  &lt;button type="button" onclick="updatePie()"&gt;Update Diagram!&lt;/button&gt;
  &lt;div class='foo'&gt;&lt;/div&gt;
  
  
  const width = 260;
  const height = 260;
  const thickness = 40;
  const duration = 750;
  
  const radius = Math.min(width, height) / 2;
  const color = d3.scaleOrdinal(d3.schemeCategory10);
  
  const arc = d3
    .arc()
    .innerRadius(radius - thickness)
    .outerRadius(radius);
  
  const pie = d3
    .pie()
    .value(function(d) {
      return d.value;
    })
    .sort(null);
  
  
  const create = function(data) {
    const svg = d3
      .select('.foo')
      .append('svg')
      .attr('class', 'pie')
      .attr('width', width)
      .attr('height', height)
      .attr('id', 'svgClass');
  
    svg
      .append('g')
      .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
      .attr('id', 'bar');
      createLegend();
    draw(data);
  }
  
  const draw = function(data) {
    const path = d3.select('#bar')
      .selectAll('path')
      .data(pie(data))
  
    path
      .enter()
      .append('g')
      .append('path')
      .attr('d', arc)
      .attr('fill', (d, i) =&gt; color(i));
  
    path
      .transition()
      .duration(duration)
      .attrTween('d', function(d) {
        const interpolate = d3.interpolate({
          startAngle: 0,
          endAngle: 0
        }, d);
        return function(t) {
          return arc(interpolate(t));
        };
      });
  };
  
  const createLegend = function() {
      d3.select('#svgClass')
    .append('text')
    .text('foo bar')
    .attr('position', 'relative')
    .attr('background-color', 'red')
    .attr('top', '50px')
    .attr('left', '50px')
  }
  
  
  const data = [{
      name: 'USA',
      value: 50
    },
    {
      name: 'UK',
      value: 5
    },
    {
      name: 'Canada',
      value: 5
    },
    {
      name: 'Maxico',
      value: 40
    }
  ]
  
  function createPie() {
    create(data)
  }
  
  const newData = [{
      name: 'USA',
      value: 40
    },
    {
      name: 'UK',
      value: 20
    },
    {
      name: 'Canada',
      value: 30
    },
    {
      name: 'Maxico',
      value: 10
    }
  ];
  
  function updatePie() {
    draw(newData)
  }
  </code></pre>
  
  <p>It is showing in the <code>DOM tree</code> when I inspect the Diagram. However, its not showing on the site. Why is that?</p>