D3Js v3: Path not showing up on Node Elements-CodePudding

With Javascript Im generating HTML-Code with a SVG in it. I want to display a a donut chart in it then. Im able to draw the chart on a static HTML-Element. However, when I try to display it in my JavaScript-generated node element the path is not showing up, but I can see the text. What am I missing here?

https://jsfiddle.net/fuL5doja/46/

function createNodes(){
var parent = document.getElementById('chart');
var child = document.createElement('div');
child.classList.add('childContainer');
parent.appendChild(child);
var svg = document.createElement('svg');
svg.id = 'donut';
child.appendChild(svg);
}



  function donutChart(){
    // set the dimensions and margins of the graph
    var width = 30
        height = 30
        margin = 0

    // The radius of the pieplot is half the width or half the height (smallest one). I subtract a bit of margin.
    var radius = 30

    // append the svg object to the div called 'my_dataviz'
    var svg = d3.select('#donut')
        .attr("width", width)
        .attr("height", height)
      .append("g")
        .attr("transform", "translate("   width / 2   ","   height / 2   ")");

    // Create dummy data
    var dataDummy = {a: 70, b:30}
    // set the color scale
    var color = d3.scale.ordinal()
      .domain(dataDummy)
      .range(["#bebfc2", "#8FB91C"])

    // Compute the position of each group on the pie:
    var pie = d3.layout.pie()
      .value(function(d) {return d.value; })
    var data_ready = pie(d3.entries(dataDummy))

    // Build the pie chart: Basically, each part of the pie is a path that we build using the arc function.
    svg.selectAll('whatever')
      .data(data_ready)
      .enter()
      .append('path')
      .attr('d', d3.svg.arc()
        .innerRadius(5)         // This is the size of the donut hole
        .outerRadius(radius)
      )
      .attr('fill', function(d){ return(color(d.data.key)) })
      .style("opacity", 0.7)

      svg.append("text")
        .attr("x", -12) // space legend
        .attr("y", 2)
        .attr("class", "donutText")
        .text('30%');
  }
  function donutChart2(){
    // set the dimensions and margins of the graph
    var width = 30
        height = 30
        margin = 0

    // The radius of the pieplot is half the width or half the height (smallest one). I subtract a bit of margin.
    var radius = 30

    // append the svg object to the div called 'my_dataviz'
    var svg = d3.select('#test')
        .attr("width", width)
        .attr("height", height)
      .append("g")
        .attr("transform", "translate("   width / 2   ","   height / 2   ")");

    // Create dummy data
    var dataDummy = {a: 70, b:30}
    // set the color scale
    var color = d3.scale.ordinal()
      .domain(dataDummy)
      .range(["#bebfc2", "#8FB91C"])

    // Compute the position of each group on the pie:
    var pie = d3.layout.pie()
      .value(function(d) {return d.value; })
    var data_ready = pie(d3.entries(dataDummy))

    // Build the pie chart: Basically, each part of the pie is a path that we build using the arc function.
    svg.selectAll('whatever')
      .data(data_ready)
      .enter()
      .append('path')
      .attr('d', d3.svg.arc()
        .innerRadius(5)         // This is the size of the donut hole
        .outerRadius(radius)
      )
      .attr('fill', function(d){ return(color(d.data.key)) })
      .style("opacity", 0.7)

      svg.append("text")
        .attr("x", -12) // space legend
        .attr("y", 2)
        .attr("class", "donutText")
        .text('30%');
  }



createNodes();
donutChart();
donutChart2();

.childContainer {
  width: 200px;
  height: 100px;
  border: 1px solid black;
}
#mySvg {
  
}

<div id="chart"></div>

<svg id="test"></svg>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8 M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

CodePudding user response：

You need to create the svg element with svg namespace uri for it to support path when creating directly with JavaScript:

  var svg = document.createElementNS('http://www.w3.org/2000/svg','svg');

Instead of just the typical

var svg = document.createElement('svg');

Alternatively, you could use D3 to append the svg, which will make sure it's correctly namespaced!

  d3.select(child).append('svg').attr('id', 'donut');