D3Js v3：路径未显示在节点元素上

Question

With Javascript 我正在生成 HTML-代码，其中包含 SVG。我想在其中显示一个圆环图。我能够在静态 HTML-Element 上绘制图表。但是，当我尝试在 JavaScript 生成的节点元素中显示它时，路径没有显示，但我可以看到文本。我在这里错过了什么？

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>

Answer 1

您需要使用 svg 命名空间 uri 创建 svg 元素，以便在直接使用 JavaScript:

创建时支持 path

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

而不只是典型的

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

或者，您可以使用 D3 附加 svg，这将确保它的命名空间正确！

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

D3Js v3：路径未显示在节点元素上

D3Js v3: Path not showing up on Node Elements

html

javascript

css

d3.js