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

本文介绍了D3附加HTML在边缘浏览器中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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.

，在Chrome中不能使用。

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

以下是fiddle中的代码：

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>

我也尝试过：

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

不用于SVG内容：

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:

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

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.

第二个错误是使用一个HTML实体（& deg; ），它是。或者，您可以使用。

您的初始方法实际上应该在没有浏览器，因为它是基于对DOM节点的不当fiddling。然而，Chrome，FF和其他一些似乎有点更放松，而IE是正确的。

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.

这篇关于D3附加HTML在边缘浏览器中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！