D3 附加 HTML 在边缘浏览器中不起作用

Question

我有一个使用 d3 创建的图表，我需要使用一些 HTML，其中在 Chrome 中工作正常，但边缘不显示 HTML 而且我不知道为什么了。

Here is a JSFiddle that shows the issue，适用于 Chrome 不适用于边缘..

这是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>

我也试过：

 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

Answer 1

Edge 似乎不支持它。我无法通过基本 Google 搜索找到任何文档或其他评论。

对于我的情况，我最终所做的只是在彼此的顶部添加两个圆圈来制作我需要的符号。

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

使用符号可能有更好的解决方案，但这对我有用并且符合我的要求。

如果其他人有任何关于边缘为什么或是否可以这样做的信息，而我遗漏了什么，请随时回答，我会接受答案

Answer 2

有两个错误实际上破坏了包含度数符号的文本的输出。第一个是 selection.html() 的使用，它不用于 SVG 内容：

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.

我想你选择那个方法是因为你想插入一个 HTML 实体，即度数符号。由于下面解释的原因，这可以通过其他方式实现，并且可以将正在使用的方法更改为 .text() 以处理 SVG 内容。

第二个错误是使用 HTML 实体 (°)，即 not defined for SVGs. As an alternative, you can use the Unicode escape sequence \u00b0 作为学位标志。

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

查看更新后的 JSFiddle。

您的初始方法实际上应该在任何浏览器中都不起作用，因为它基于对 DOM 节点的不当摆弄。但是，Chrome、FF 和其他一些似乎对此更宽松一些，而 IE 则正确。

D3 附加 HTML 在边缘浏览器中不起作用

D3 append HTML not working in edge browser

svg

d3.js

microsoft-edge