D3 HTML anhängen funktioniert im Edge-Browser nicht

Question

Jun 28, 2016, 01:26 AM

D3 HTML anhängen funktioniert im Edge-Browser nicht

Ich habe ein Diagramm mit d3 erstellt, in dem HTML verwendet werden muss. In Chrome funktioniert dies einwandfrei, aber edge zeigt das HTML nicht an und ich weiß nicht warum.

Hier ist eine JSFiddle, die das Problem zeigt, funktioniert in Chrome nicht in Rand ..

Hier ist der Code in Geige:

<!DOCTYPE html>
<body>
<div id="chart"></div>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script>
    (function(d3) {
    'use strict';

    var dataset = [
      { label: 'Abulia', count: 10 }, 
      { label: 'Betelgeuse', count: 20 },
      { label: 'Cantaloupe', count: 30 },
      { label: 'Dijkstra', count: 40 }
    ];

    var width = 360;
    var height = 360;
    var radius = Math.min(width, height) / 2;

    var color = d3.scale.category20b();

    var svg = d3.select('#chart')
      .append('svg')
      .attr('width', width)
      .attr('height', height)
      .append('g')
      .attr('transform', 'translate(' + (width / 2) + 
        ',' + (height / 2) + ')');

    var arc = d3.svg.arc()
      .outerRadius(radius);

    var pie = d3.layout.pie()
      .value(function(d) { return d.count; })
      .sort(null);

    var path = svg.selectAll('path')
      .data(pie(dataset))
      .enter()
      .append('path')
      .attr('d', arc)
      .attr('fill', function(d, i) { 
        return color(d.data.label);
      });
         svg.append("text")
            .attr('y', 0)
        .attr('x', 100)
        .data(['some text'])
        .attr("text-anchor", "middle")
        .attr('font-size', '20px')
        .attr('font-weight', 'bold')
        .attr('fill', 'white')
        .text(function(d) {
            return d; 
        });
    svg.append("text")
    .attr('y', 0)
        .attr('x', -100)
        .data(['some html &deg;'])
        .attr("text-anchor", "middle")
        .attr('font-size', '20px')
        .attr('font-weight', 'bold')
        .attr('fill', 'white')
        .html(function(d) {
            return d; 
        });
  })(window.d3);


  </script>
</body>

Ich habe auch versucht:

 svg.append("foreignObject")
    .attr('y', 0)
        .attr('x', -100)
        .data(['some html &deg;'])
        .attr("text-anchor", "middle")
        .attr('font-size', '20px')
        .attr('font-weight', 'bold')
        .attr('fill', 'white')
                  .attr('width', width)
      .attr('height', height)
        .html(function(d) {
            return d; 
        });

Wie pro Q / A hier