D3 append HTML not working in edge browser

问题

I have a chart created using d3 that I need to use some HTML inside of which works fine in Chrome but edge does not display the HTML and I don't know why.

Here is a JSFiddle that shows the issue, works in Chrome does not in edge..

Here is the code in fiddle:

<!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>

I have also tried:

 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; 
        });

As per Q/A here

回答1:

There are two errors actually breaking the output of the text containing the degree sign. The first one is the use of selection.html() which is not to be used for SVG content:

Note: as its name suggests, selection.html is only supported on HTML elements. SVG elements and other non-HTML elements do not support the innerHTML property, and thus are incompatible with selection.html.

I suppose you chose that method because you wanted to insert an HTML entity, namely the degree sign. For reasons explained below this can be achieved by other means and the method in use can be changed to .text() to work with SVG content.

The second error is the use of an HTML entity (°) which is not defined for SVGs. As an alternative, you can use the Unicode escape sequence \u00b0 for your degree sign.

svg.append("text")
  // ...
  .data(['some html \u00b0'])  // Use Unicode escape sequence instead of HTML entity
  // ... .attr("", "")
  .text(function(d) {          // Use .text() instead of .html()
    return d;
  });

Have a look at the updated JSFiddle.

Your initial approach should actually work in no browser at all, because it is based on improper fiddling with DOM nodes. However, Chrome, FF and some others seem to be a bit more relaxed about it, while IE got it right.

回答2:

It looks like it is not supported in Edge. I cannot find any documentation or other commentary with a rudimentary Google Search.

For my case what I ended up doing it just adding a two circles on top of each-other to make the symbol I needed.

    svg.append("circle")
        .attr("cx", degreeSignOffsetX)
        .attr("cy", degreeSignOffsetY)
        .attr("r", 2)
        .style("fill", function(d) { return 'black'; });

    svg.append("circle")
        .attr("cx", degreeSignOffsetX)
        .attr("cy", degreeSignOffsetY)
        .attr("r", 1)
        .style("fill", function(d) { return 'white'; });

There might be a better solution using a symbol but this worked for me and it meets my requirements.

If some one else has any info on why or if edge CAN do this and I am missing something feel free to answer and I will accept the answer

来源：https://stackoverflow.com/questions/38064765/d3-append-html-not-working-in-edge-browser

标签

d3.js

svg

microsoft-edge