Question

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

Difference between ASP.NET Core (.NET Core) and ASP.NET Core (.NET Framework) ，在Chrome浏览器中无效。

以下是小提琴中的代码：

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

Here is a JSFiddle that shows the issue

Answer 1

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

注意：顾名思义，selection.html仅支持HTML元素。 SVG元素和其他非HTML元素不支持innerHTML属性，因此与selection.html不兼容。

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

第二个错误是使用not defined for SVGs的HTML实体（°）。作为替代方案，您可以使用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则说得对。

Answer 2

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

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

如果其他人有任何关于为什么或如果边缘CAN这样做的信息，我错过了一些随意回答的问题，我将接受答案

D3附加HTML无法在边缘浏览器中使用

2 个答案: